Golang Web开发- Gin不使用Nginx部署Vue项目

已于 2024-06-21 10:38:20 修改
阅读量617 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Golang 运维开发实战手册 文章标签： 前端 golang gin anti-design-vue vue部署 前后端分离部署
于 2024-05-26 21:30:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cui_win/article/details/139220246
本文介绍了如何不使用Nginx，直接将ANTD PRO VUE前端与Gin后端结合部署。首先，详细讲解了ANTD PRO VUE的下载、安装、启动和前端构建过程，特别强调了修改路由模式以避免刷新后404错误。接着，提到了可选的权限去除步骤。然后，展示了Gin后端如何接收并处理前端构建后的静态文件。最后，总结了这种部署方式的便利性。

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

文章目录

前言

当我们应用后端用Gin框架，前端使用Vue开发，那么在最后部署上线的时候，一般是前端Vue构建的dist目录的文件部署在Nginx上，Nginx反向代理到Gin后端代码。但是这样的部署方式略微繁琐，尤其只是临时启动下应用的时候，没必要再部署一个Nginx。

下面我们将前端部署项目使用较多的 ANTD PRO VUE结合Gin 框架实现
前端构建产物和Gin打一个包部署。
启动效果：
在这里插入图片描述

一、ANTD PRO VUE 构建

Ant Design Pro 是一个企业级中后台前端/设计解决方案。尽管是基于Vue2.0的，但是应对我们一般的小项目还是满足的，而且Ant Design Pro 可以通过简单配置去除权限控制，直接打开工作台，平时开发一些小应用还是比较方便的。

下载代码

$
了解本专栏 订阅专栏 解锁全文 超级会员免费看
golang gin单独部署vue3.0前后端分离应用
qq_38189542的博客
02-26 1773
因为公司最近的项目前端使用vue 3.0，后端api使用golang gin框架。测试通过后，博文记录，用于备忘。
Golang Gin框架部署二级目录打包的Vue前端项目小记
qq_38189542的博客
07-24 616
因为最近在公司开发项目遇到一个需求 - 我们自己开发的B/S系统(以下简称：二级系统)作为二级子系统嵌入到三方企业的主系统，界面入口是主系统。经过一番折腾，成功实现，故而博文记录，用以备忘。
【从java到Go】Gin框架整合并部署Vue
幽灵雾的专栏
10-21 3344
基于java基础，快速学习Golang 从零在Gin框架中整合并部署Vue
gin-vue-admin 不使用 nginx，发布到windows平台
06-09 1328
gin-vue-admin windos开发环境，发布到windos平台，在不改其他配置,不使用 nginx , 非常简单，3个步骤就行 1.修改 gin-vue-admin\server\core\server.go, 加上Router.Static("/fe", "./resource/dist")fe表示前端的访问地址，如果后台的地址是http://127.0.0.1:8888， 那么前端就是http://127.0.0.1:8888/fe 2. 修改 gin-vue-...
不用Nginx，Golang如何部署Vue应用呢？
weixin_51507240的博客
04-08 2404
这个问题已经困扰了我将近一年了，去年刚开始学习golang的时候，就想过能不能通过golang的静态资源服务器来部署vue打包后的资源呢？
Golang之Gin打包React/Vue项目
学习和工作总结，共勉！
10-08 5987
一. 传统打包痛点 Golang作为api接口服务非常方便，日常将Gin的项目打包是二进制文件直接部署是很方便。但是作为前段的Vue或者React项目需要在nginx或者tomcat转发才可以。 这样对于一些中小项目就很麻烦，尤其我们写一下小工具。如果在使用前后端分离通过nginx转发代理部分，就很麻烦，失去了golang项目的便捷性。 二. golang新特性 在golang的1.16版本增加了embed的标签，肯方便我们将静态资源文件打包为二进制文件。这样有了原生支持就可以省去引入一些第三方关于静态资源
云服务器部署vue项目
qq_39187593的博客
08-28 1357
vue项目进行npm run build的命令， 生成一个dist包。记得开放对应的端口号。
docker-compose编排部署多服务Web应用(python/fastapi, go/gin, nginx, mysql, redis)
IMISer2016的博客
06-19 1864
目前项目涉及到的基础设施有mysql, nginx, redis，服务模块有两个 python/fastapi 和 golang/gin。 如果本地部署的话需要配置的环境有点多，虚拟化（以docker容器形式）是目前（最）流行的部署方法。加上众多编排工具可选择，非常适合Frodo目前多服务的形式。本文先介绍项目的docker部署方法，再以此为例，谈谈docker-compose编排多服务应用的特点和需要注意的地方。希望本文对大家开始实践部署多服务的容器编排应用能有启发~ 项目地址： python/fas.
go语言day22 gin-vue-admin全栈项目的依赖安装
weixin_45939821的博客
08-06 753
在goland中打开server目录，这时main函数还不能直接运行，许多依赖没有下载和导入，goland会直接报红。这里我把宝塔关闭了就好了，不知道是端口占用还是说内置的nginx服务器冲突了。一直卡在 npm install的下载上，但是网速一直都是几KB。傻瓜式安装，安装时直接勾选addPath，自动配置环境变量。在vscode中或者直接就在goland中打开web目录，再次npm install。
Go实战Gin+Vue+微服务打造秒杀商城配套代码
05-27
本项目是基于Go语言的Gin框架，配合前端Vue.js技术栈，以及微服务架构设计的秒杀商城系统。通过这个实战项目，我们可以深入学习如何利用现代Web开发工具和技术来构建一个高性能、高并发的电商应用。以下是相关知识点...
基于Gin + Vue + Element UI前后端分离的工单系统-Golang开发
05-26
本系统是集工单统计、任务钩子、权限管理、灵活配置流程与模版等等于一身的开源工单系统，当然也可以称之为工作流引擎。 致力于减少跨部门之间的沟通，自动任务的执行，提升工作效率与工作质量，减少不必要的工作量与人为出错率。 基于Gin + Vue + Element UI前后端分离的工单系统 流程中心 通过灵活的配置流程、模版等数据，非常快速方便的生成工单流程，通过对流程进行任务绑定，实现流程中的钩子操作，目前支持绑定邮件来通知处理，当然为兼容更多的通知方式，也可以自己写任务脚本来进行任务通知，可根据自己的需求定制。 兼容了多种处理情况，包括串行处理、并行处理以及根据条件判断进行节点跳转。 可通过变量设置处理人，例如：直接负责人、部门负责人、HRBP等变量数据。 系统管理 基于casbin的RBAC权限控制，借鉴了go-admin项目的前端权限管理，可以在页面对API、菜单、页面按钮等操作，进行灵活且简单的配置。 演示demo: http://fdevops.com:8001/#/dashboard 账号：admin 密码：123456 演示demo登陆需要取消ldap验证，就是登陆页
基于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和
vue-golang-embed-实现前后端不分离部署
aaliliaa的博客
09-25 1233
vue golang embed实现前后端不分离部署
宝塔面板部署Vue+Gin项目（吐血整理，各种踩坑）
m0_64091529的博客
01-26 1987
部署Vue+Gin项目（吐血整理，各种踩坑）
Vue + Golang 项目实战（二）：前端部署
YoooKnight的博客
11-28 1628
开始清理一些不必要的代码，只留下一个菜单选项即可。
Golang:Gin+Vue零基础入门教程
weixin_50196917的博客
06-30 1106
一款 Go 语言基于Gin、Xorm、Vue、ElementUI、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式，同时为了敏捷快速开发，框架特地集成了代码生成器，完全自主研发了自定义GO后端服务模板和前端Vue自定义模板，可以根据已建好的表结构，可以快速的一键生成整个模块的所有代码和增删改查等等功能业务，真正实现了低代码开发方式，极大的节省了人力成本
使用golang挂载Vue-dist静态页面
qq_58671071的博客
03-13 348
在部署vue-dist时如果不喜欢使用nignx或者tomcat可以使用这个简单快捷的挂载服务器。喜欢的朋友记得给项目点个星。
goLang 中 gin框架实现文件上传（vue + go）
weixin_50011679的博客
10-14 2083
在工作中，经常会遇到上传文件到服务器的需求，本篇文章结合工作实际情况，在vue与goLang的前后分离架构中实现文件上传存储。前端：vue+vuetify后端：go+gin上传的方式有很多种，包括静态，动态，单文件，多文件，但是原理大致相同，这个小demo作为工作中遇到的问题进行整理，互相学习。
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-1.工具和本地环境
最强的森的博客
07-20 2451
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-1.工具和本地环境 相关文章： 技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-1.工具和本地环境 1.前言 之前学习了node.js + vue.js全栈开发，其实就是以node为后端并使用express框架进行前后端分离的全栈项目。 互联网发展日益成熟，要想成为一个称职的全栈工作者，就需要有在一周学会一个新后端工具的能力。 从今天开始我们针对前端全栈，学习使用go后端语言，并使用go
用GOLANG能开发VUE代码吗
最新发布
03-08
<think>好的，我现在需要回答用户关于Golang与Vue.js的兼容性以及如何集成它们开发项目的问题。首先，我得确认用户的主要疑问是什么。他们可能想知道这两者是否能协同工作，以及具体的集成方法。 根据提供的引用资料，尤其是引用[3]，里面提到《Golang+Vue.js商城项目实战》这本书详细讲解了如何使用Gin框架和Vue.js进行全栈开发。这说明两者是可以兼容的，通常的做法是前后端分离。Golang作为后端API服务，Vue.js负责前端界面，通过HTTP请求交互。 接下来，我需要整理出集成方式的步骤。常见的做法包括： 1. **项目结构分离**：前后端各自独立项目，通过接口通信。引用[3]提到使用Gin和Vue.js为核心框架，说明这种结构是可行的。 2. **跨域处理**：开发时前端可能需要访问后端API，需要配置CORS。Golang的Gin框架可以通过中间件解决，如引用中的示例代码。 3. **接口联调**：定义RESTful API，前端通过axios等库调用。 4. **静态资源部署**：生产环境下，将Vue编译后的静态文件嵌入Golang服务或由Nginx托管。引用[3]第9章提到使用Docker部署，可能涉及静态资源处理。 5. **模板渲染（可选）**：虽然不常见，但Golang也可以渲染Vue组件，不过可能增加复杂度，适合特定场景。 然后要考虑用户可能的疑问点，比如跨域问题如何处理，如何部署，是否需要额外的配置。需要引用资料中的内容来支持回答，比如引用[3]提到的架构设计和部署方法。 最后，生成相关问题，帮助用户深入理解。例如，如何解决跨域问题，或者如何进行项目部署，这些都可能基于引用中的信息。 需要确保回答结构清晰，分点说明，并且引用正确来源。同时，检查是否有遗漏的步骤或常见问题，确保用户能够顺利集成Golang和Vue.js。</think>### Golang与Vue.js的兼容性及集成方式 #### 1. 兼容性分析 Golang（Gin框架）与Vue.js是**天然兼容**的前后端分离开发组合。Golang通过RESTful API提供数据接口，Vue.js负责前端界面渲染，两者通过HTTP协议交互。例如，在《Golang+Vue.js商城项目实战》中，Gin框架处理订单管理、用户认证等后端逻辑，Vue.js实现商品展示、购物车交互等前端功能[^3]。 #### 2. 集成开发方式 ##### 方式一：完全分离架构（推荐） - **后端（Golang）**：使用Gin框架创建API服务 ```go package main import "github.com/gin-gonic/gin" func main() { r := gin.Default() r.GET("/api/products", func(c *gin.Context) { c.JSON(200, gin.H{"data": "产品列表"}) }) r.Run(":8080") } ``` - **前端（Vue.js）**：通过axios调用接口 ```javascript axios.get('http://localhost:8080/api/products') .then(response => { this.products = response.data; }) ``` ##### 方式二：混合部署方案 将Vue编译后的静态文件嵌入Golang服务： ```go r.Static("/static", "./dist/static") r.LoadHTMLFiles("./dist/index.html") r.GET("/", func(c *gin.Context) { c.HTML(200, "index.html", nil) }) ``` #### 3. 关键配置步骤 1. **跨域处理（CORS）** ```go // Golang端配置中间件 r.Use(cors.New(cors.Config{ AllowOrigins: []string{"http://localhost:3000"}, AllowMethods: []string{"PUT", "PATCH", "GET", "POST"}, AllowHeaders: []string{"Origin", "Content-Type"}, })) ``` 2. **接口规范设计** - 遵循RESTful风格 - 使用JSON作为数据交换格式 - 接口版本控制（如`/api/v1/products`） 3. **开发环境配置 - Vue开发服务器：`npm run serve`（默认端口3000） - Golang服务端口：8080 - 通过`vue.config.js`配置代理： ```javascript module.exports = { devServer: { proxy: 'http://localhost:8080' } } ``` #### 4. 典型应用场景 1. **电商平台**：商品管理系统（后端Go处理库存逻辑，前端Vue实现可视化编辑） 2. **实时监控系统**：Go处理传感器数据采集，Vue实现数据仪表盘 3. **SAAS应用**：Go实现多租户架构，Vue构建管理后台
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值