golang gin单独部署vue3.0前后端分离应用

已于 2024-02-26 19:57:52 修改
阅读量1.7k 收藏 3
点赞数 5
分类专栏： Web 文章标签： golang gin 开发语言
于 2024-02-26 19:50:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38189542/article/details/136307089
版权
本文介绍了在使用Vue3.0作为前端框架和Gin作为后端API框架的项目中，如何构建前端并将其静态资源如CSS、JS和图片部署到后端，以及如何通过Gin处理静态文件和HTML模板的部署流程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

概述

因为公司最近的项目前端使用vue 3.0，后端api使用golang gin框架。测试通过后，博文记录，用于备忘。

步骤

  1. npm run build，构建出前端项目的dist目录，dist目录的结构具体如下图
    在这里插入图片描述
  2. 将dist目录复制到后端程序同级目录，后端代码中添加以下命令
	r := gin.Default()
	r.Static("/css", "./dist/css")
	r.
最低0.47元/天 解锁文章
Golang Web开发- Gin不使用Nginx部署Vue项目
cui_win的专栏
05-26 591
当我们应用后端用Gin框架，前端使用Vue开发，那么在最后部署上线的时候，一般是前端Vue构建的dist目录的文件部署在Nginx上，Nginx反向代理到Gin后端代码。但是这样的部署方式略微繁琐，尤其只是临时启动下应用的时候，没必要再部署一个Nginx。下面我们将前端部署项目使用较多的结合Gin 框架实现前端构建产物和Gin打一个包部署。vue已经是目前最流行的前端开发方式了，对于Jquery，Layui这类对于小功能可以使用，稍微复杂的还是考虑使用vue进行前端开发。
基于Gin+Vue+ElementUI低代码开发平台
weixin_50196917的博客
03-05 1803
是一款基于Golang、Gin、Xorm、Vue、ElementUI、MySQL等技术栈开发平台框架，拥有完善的(RBAC)权限架构和基础核心管理模块，为了缩短研发周期，系统框架集成了代码生成器，内置平台自定义研发的模板引擎，可以一键CRUD生成整个模块的全部代码，本框架为一站式系统框架开发平台，可以帮助开发者提升开发效率、降低研发成本，同时便于后期的系统维护升级。......
Go语言Gin框架前后端分离项目开发工程化实例
码农兴哥的技术笔记
11-07 1024
Go语言Gin框架前后端分离项目开发工程化实例，后端通过模拟用户注册登录接口以及中间件校验，项目代码构建发布，前端使用Vue实现了一个简单的页面，然后调用后端接口。
Golang和Vue前后端分离项目打包一个可执行文件
我的小站：https://oby.ink
04-25 3323
前后分离开发模式现在非常流行，前后端工程师各自开发各端，各不干扰，提高开发效率。但是部署起来特别麻烦。前后端需要各自打包部署。本文介绍将golang前后端分离项目打包成一个可执行文件。
基于Golang语言Echo+Vue+ElementUI前后端分离框架
weixin_50196917的博客
01-19 368
一款 Go 语言基于Echo、Vue、ElementUI、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式，同时为了敏捷快速开发，框架特地集成了代码生成器，完全自主研发了自定义GO后端服务模板和前端Vue自定义模板，可以根据已建好的表结构，可以快速的一键生成整个模块的所有代码和增删改查等等功能业务，真正实现了低代码开发方式，极大的节省了人力成本的同时提
基于Gin+Vue3前后端分离权限管理系统源码+项目说明+数据库.zip
07-25
基于Gin+Vue3前后端分离权限管理系统源码+项目说明+数据库.zip 【项目资源介绍】 平台简介 * 前端技术栈 TypeScript、Vue3、Element-Plus、Vite、Pinia * 后端技术栈 Golang、Gin、Gorm、MySQL、Redis、Casbin ...
基于golang+vue前后端分离的视频弹幕网站项目源码+数据库（毕业设计）.zip
03-12
基于golang+vue前后端分离的视频弹幕网源码+数据库（毕业设计）.zip具有视频，专栏 ，直播 ，im 等功能，是基于Golang + Vue开发的前后端分离项目，Server端采用 Golang + Gin + Gorm，Web端采用 Vue3 + Typescript ...
基于Gin + Vue + Element UI前后端分离的工单系统-Golang开发
05-26
基于Gin + Vue + Element UI前后端分离的工单系统 流程中心 通过灵活的配置流程、模版等数据，非常快速方便的生成工单流程，通过对流程进行任务绑定，实现流程中的钩子操作，目前支持绑定邮件来通知处理，当然为兼容...
【从java到Go】Gin框架整合并部署Vue
幽灵雾的专栏
10-21 3301
基于java基础，快速学习Golang 从零在Gin框架中整合并部署Vue
Vue + Golang 项目实战（二）：前端部署
YoooKnight的博客
11-28 1612
开始清理一些不必要的代码，只留下一个菜单选项即可。
基于Gin+Vue+Element UI的Go语言前后端分离权限管理系统设计源码
最新发布
09-28
该源码项目采用Gin+Vue+Element UI技术栈，实现了一个前后端分离的权限管理系统。项目包含254个文件，涵盖185个Go源文件、16个模板文件、15个YAML配置文件等，支持Go、JavaScript、Shell、CSS、HTML等多种编程语言。该系统初始化简便，仅需在配置文件中修改数据库连接，即可自动初始化数据库信息及基础数据，适用于快速搭建权限管理平台。
基于gin+vue搭建的后台管理系统框架-Golang开发
05-26
基于gin+vue搭建的后台管理系统框架，集成jwt鉴权，权限管理，动态路由，分页封装，多点登录拦截，资源权限，上传下载，代码生成器，表单生成器，通用工作流等基础功能，五分钟一套CURD前后端代码，目前已支持VUE3 English | 简体中文 gitee地址:https://gitee.com/pixelmax/gin-vue-admin github地址:https://github.com/flipped-aurora/gin-vue-admin vue3版本分支地址:https://github.com/flipped-aurora/gin-vue-admin/tree/vue3Develop 项目文档 在线文档 : https://www.gin-vue-admin.com/ 从环境到部署教学视频 开发教学 (贡献者: LLemonGreen And Fann) 前端UI框架：element-ui 后台框架：gin 1. 基本介绍 1.1 项目介绍 在线预览 测试用户名：admin 测试密码：123456 Gin-vue-admin是一个基于vue和
go快速开发框架gin+vue快速开发后台管理(前后端分离)，极快接口api生成器，快到不写一行代码，10秒接口就可以调用
GoFly开发者的博客
06-03 6587
​用 Go 语言基于Gin、Vue、Typescript、vite、Arco Design、MySQL等框架精心打造的一款模块化、插件化、高度自动化、高性能的前后端分离架构敏捷开发框架，可快速搭建前后端分离后台管理系统。本着简化开发、提升开发效率的初衷，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式，同时为了敏捷快速开发，框架特地集成了代码生成器一键生成管理后台的前后端代码，快速开发或生成api接口代码和接口文档、测试api接口等编辑，完全自主研发了自定义GO后端服务模板和前端Vue自定义模板
基于Go语言Gin+Vue+ElementUI的前后端分离敏捷开发框架
weixin_50196917的博客
03-05 2164
是一款基于Golang、Gin、Xorm、Vue、ElementUI、MySQL等技术栈开发平台框架，拥有完善的(RBAC)权限架构和基础核心管理模块，为了缩短研发周期，系统框架集成了代码生成器，内置平台自定义研发的模板引擎，可以一键CRUD生成整个模块的全部代码，本框架为一站式系统框架开发平台，可以帮助开发者提升开发效率、降低研发成本，同时便于后期的系统维护升级。......
不用Nginx，Golang如何部署Vue应用呢？
weixin_51507240的博客
04-08 2368
这个问题已经困扰了我将近一年了，去年刚开始学习golang的时候，就想过能不能通过golang的静态资源服务器来部署vue打包后的资源呢？
Golang+Nodejs前后端开发分离示例
weixin_33972649的博客
02-17 920
一直想看看前后端分离是什么样的感觉,所以就试试看了,因为java感觉有点麻烦,就用了go语言来代替后端。原理: 当浏览器请求访问数据时将数据提交到nodejs写的服务器中,nodejs将数据解析处理后发送给Golang写的后台服务器(请求协议可自定义),Golang写的后台服务器主要是数据库方面操作,操作完...
Gin-Vue-Admin 线上部署
lauwen
01-14 5612
前言 在网上找的很多教程包括官方的都不够细致，很容易导致出现问题，所以特记录下部署的过程 官方部署文档：部署教学 | Gin-Vue-Admin 准备 前端 配置文件修改 修改前端目录下的.env.production文件 VUE_APP_SERVER_PORT：根据自己后端项目运行端口设置，我这里使用了8806 VUE_APP_BASE_PATH：官方设置为了线上ip，经测试设置为本地回环地址也没问题（最好根据官方，我先踩坑） VUE_APP_BASE_API：根据nginx设置的代
Golang之Gin打包React/Vue项目
学习和工作总结，共勉！
10-08 5936
一. 传统打包痛点 Golang作为api接口服务非常方便，日常将Gin的项目打包是二进制文件直接部署是很方便。但是作为前段的Vue或者React项目需要在nginx或者tomcat转发才可以。 这样对于一些中小项目就很麻烦，尤其我们写一下小工具。如果在使用前后端分离通过nginx转发代理部分，就很麻烦，失去了golang项目的便捷性。 二. golang新特性 在golang的1.16版本增加了embed的标签，肯方便我们将静态资源文件打包为二进制文件。这样有了原生支持就可以省去引入一些第三方关于静态资源
vue3 + golang (gin) 前后端crud和地图爬虫商家展示项目
大浪翻云的博客
02-02 327
但是后来也没去跑业务，还是搞其他事情去了，一直到了7月份，当时想要不把这个东西的后端也搞出来，做成一个网站，然后卖会员给别人，于是又开始加群，各种在B站刷golang的视频，东看西看一些golang的入门视频，最后能把后端整出来还是因为在github找到了一个好像是叫vue-gin-admin的框架，基本也是差不多照抄，到了9月底把后端也修修改改整出来了，又学了几天docker，把doker部署也整出来了，不过后来也因为一些当前环境的阻碍因素吧，也没把网站整起来。我这个年龄，也不知道方向在哪里。
Gin + Vue打造的高效前后端分离权限管理系统
本项目是一套基于现代Web开发技术栈的权限管理系统，采用前后端分离架构，使用了Gin作为后端框架，Vue.js作为前端框架，并集成了Element UI、Arco Design以及Ant Design这三个流行的UI库来构建用户界面。下面，将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜晓码农

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值