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

已于 2024-06-21 10:38:20 修改
阅读量804 收藏 2
点赞数
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后端如何接收并处理前端构建后的静态文件。最后，总结了这种部署方式的便利性。

文章目录

前言

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

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

一、ANTD PRO VUE 构建

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

下载代码

$ git clone --depth
了解本专栏 订阅专栏 解锁全文 超级会员免费看
golang gin单独部署vue3.0前后端分离应用
qq_38189542的博客
02-26 1975
因为公司最近的项目前端使用vue 3.0，后端api使用golang gin框架。测试通过后，博文记录，用于备忘。
vue-golang-embed-实现前后端不分离部署
aaliliaa的博客
09-25 1332
vue golang embed实现前后端不分离部署
宝塔面板部署Vue+Gin项目（吐血整理，各种踩坑）
m0_64091529的博客
01-26 2150
部署Vue+Gin项目（吐血整理，各种踩坑）
【从java到Go】Gin框架整合并部署Vue
幽灵雾的专栏
10-21 3559
基于java基础，快速学习Golang 从零在Gin框架中整合并部署Vue
gin-vue-admin 不使用 nginx，发布到windows平台
06-09 1386
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-...
Golang Gin框架部署二级目录打包的Vue前端项目小记
qq_38189542的博客
07-24 717
因为最近在公司开发项目遇到一个需求 - 我们自己开发的B/S系统(以下简称：二级系统)作为二级子系统嵌入到三方企业的主系统，界面入口是主系统。经过一番折腾，成功实现，故而博文记录，用以备忘。
前后端分离项目(gin+gorm+vue3)腾讯云部署详细教程(Xshell安装及使用，go,mysql,nginx安装及配置)
qq_50737715的博客
11-12 3151
（一）服务器购买与配置 1. 购买服务器 2. 重置密码 3. 添加端口 （二）Xshell安装与使用 1. 安装Xshell 2. 使用Xshell连接服务器 （三）go和mySQL环境安装与后端部署 1. 安装Go环境 2. 安装mySQL环境 3. 打包并部署后端 （四）nginx安装与前端部署 1. 安装nginx 2. 打包并部署前端 （五）总结
Golang+Mysql+Vue+Nginx前后端分离项目--个人博客
Peerless__的博客
05-24 3183
之前利用空闲时间做了一个个人博客系统，后端主要使用golang+gin框架+Mysql实现，前端使用vue+element ui + bootstrap。项目的部署使用docker，nginx作为静态资源服务器和反向代理服务器。 结构图如下： 1、效果图 访问地址：我的博客 博客首页： 博客详情页 文章标签 归档 资源库 博客后台管理   数据库设计 数据库主要包含12张表，分别是用户表、博客类型表、博客标签表、资源库表、资源类别表、格言表、留言表、随笔表、博客评论表、博客标签中
Go实战Gin+Vue+微服务打造秒杀商城配套代码
05-27
本项目是基于Go语言的Gin框架，配合前端Vue.js技术栈，以及微服务架构设计的秒杀商城系统。通过这个实战项目，我们可以深入学习如何利用现代Web开发工具和技术来构建一个高性能、高并发的电商应用。以下是相关知识点...
不用Nginx，Golang如何部署Vue应用呢？
weixin_51507240的博客
04-08 2511
这个问题已经困扰了我将近一年了，去年刚开始学习golang的时候，就想过能不能通过golang的静态资源服务器来部署vue打包后的资源呢？
基于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和
Golang之Gin打包React/Vue项目
学习和工作总结，共勉！
10-08 6168
一. 传统打包痛点 Golang作为api接口服务非常方便，日常将Gin的项目打包是二进制文件直接部署是很方便。但是作为前段的Vue或者React项目需要在nginx或者tomcat转发才可以。 这样对于一些中小项目就很麻烦，尤其我们写一下小工具。如果在使用前后端分离通过nginx转发代理部分，就很麻烦，失去了golang项目的便捷性。 二. golang新特性 在golang的1.16版本增加了embed的标签，肯方便我们将静态资源文件打包为二进制文件。这样有了原生支持就可以省去引入一些第三方关于静态资源
云服务器部署vue项目
qq_39187593的博客
08-28 1418
vue项目进行npm run build的命令， 生成一个dist包。记得开放对应的端口号。
Vue + Golang 项目实战（二）：前端部署
YoooKnight的博客
11-28 1697
开始清理一些不必要的代码，只留下一个菜单选项即可。
Golang:Gin+Vue零基础入门教程
weixin_50196917的博客
06-30 1133
一款 Go 语言基于Gin、Xorm、Vue、ElementUI、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式，同时为了敏捷快速开发，框架特地集成了代码生成器，完全自主研发了自定义GO后端服务模板和前端Vue自定义模板，可以根据已建好的表结构，可以快速的一键生成整个模块的所有代码和增删改查等等功能业务，真正实现了低代码开发方式，极大的节省了人力成本
使用golang挂载Vue-dist静态页面
qq_58671071的博客
03-13 378
在部署vue-dist时如果不喜欢使用nignx或者tomcat可以使用这个简单快捷的挂载服务器。喜欢的朋友记得给项目点个星。
goLang 中 gin框架实现文件上传（vue + go）
weixin_50011679的博客
10-14 2142
在工作中，经常会遇到上传文件到服务器的需求，本篇文章结合工作实际情况，在vue与goLang的前后分离架构中实现文件上传存储。前端：vue+vuetify后端：go+gin上传的方式有很多种，包括静态，动态，单文件，多文件，但是原理大致相同，这个小demo作为工作中遇到的问题进行整理，互相学习。
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-1.工具和本地环境
最强的森的博客
07-20 2533
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-1.工具和本地环境 相关文章： 技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-1.工具和本地环境 1.前言 之前学习了node.js + vue.js全栈开发，其实就是以node为后端并使用express框架进行前后端分离的全栈项目。 互联网发展日益成熟，要想成为一个称职的全栈工作者，就需要有在一周学会一个新后端工具的能力。 从今天开始我们针对前端全栈，学习使用go后端语言，并使用go
golang怎么部署vue
最新发布
07-08
在 Golang 环境中部署 Vue 前端应用，尤其是在使用 Gin 框架时，可以通过将 Vue 构建后的静态资源直接托管在 Gin 服务器上实现。这种做法避免了额外部署 Nginx 的复杂性，并且可以在一个端口下提供前后端服务[^3]。 ### 部署步骤 #### 1. 构建 Vue 应用 首先，在开发环境中构建 Vue 项目，生成 `dist` 目录： ```bash npm run build ``` 该命令会将 Vue 项目打包为静态文件，并输出到 `dist/` 文件夹中。确保你的 Vue 项目已经配置好生产环境的打包设置。 #### 2. 将 `dist` 目录放置于 Gin 项目根目录 将 `dist` 文件夹复制到与 Gin 后端程序相同的目录层级下，以便后续加载静态资源和 HTML 页面。 #### 3. 配置 Gin 路由以托管静态资源和 HTML 页面 在 Gin 中，可以使用 `.Static()` 方法来映射静态资源路径（如 `/css`, `/js`, `/img`），并通过 `.LoadHTMLGlob()` 加载 HTML 模板来渲染主页面： ```go package main import ( "net/http" "github.com/gin-gonic/gin" ) func main() { r := gin.Default() // 托管静态资源 r.Static("/css", "./dist/css") r.Static("/js", "./dist/js") r.Static("/img", "./dist/img") // 加载 HTML 模板 r.LoadHTMLGlob("dist/index.html") // 主页路由 r.GET("/", func(c *gin.Context) { c.HTML(http.StatusOK, "index.html", nil) }) // 启动服务器 r.Run(":8080") } ``` 上述代码将 Vue 构建出的 `index.html` 设置为主页入口，并通过 Gin 提供对 `/`, `/css`, `/js`, `/img` 等路径的访问支持[^3]。 #### 4. 处理 Vue Router 的 History 模式问题 如果你的 Vue 项目使用了 `history` 模式的路由，当用户直接访问子路径（例如 `/about`）时，Gin 默认不会处理这些请求，导致 404 错误。解决方法是添加一个通配符路由，将所有未匹配的请求重定向回 `index.html`： ```go r.NoRoute(func(c *gin.Context) { c.File("./dist/index.html") }) ``` 这样即使用户访问 `/about` 或其他 Vue 内部路径，也能正确加载前端路由并展示对应内容[^2]。 --- ### 示例结构 假设你的项目结构如下： ``` . ├── dist/ │ ├── index.html │ ├── css/ │ ├── js/ │ └── img/ ├── main.go └── go.mod ``` 运行 `main.go` 后，访问 `http://localhost:8080` 即可看到 Vue 前端页面正常显示。 --- ### 优势与适用场景 - **简化部署流程**：无需额外配置 Nginx，适合临时测试或小型项目。 - **统一端口**：前后端共享同一个端口，便于跨域调试和部署。 - **快速启动**：适用于需要快速上线的场景，尤其适合单机部署或容器化部署。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值