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

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

文章目录

前言

当我们应用后端用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框架部署二级目录打包的Vue前端项目小记
qq_38189542的博客
07-24 501
因为最近在公司开发项目遇到一个需求 - 我们自己开发的B/S系统(以下简称：二级系统)作为二级子系统嵌入到三方企业的主系统，界面入口是主系统。经过一番折腾，成功实现，故而博文记录，用以备忘。
golang gin单独部署vue3.0前后端分离应用
qq_38189542的博客
02-26 1356
因为公司最近的项目前端使用vue 3.0，后端api使用golang gin框架。测试通过后，博文记录，用于备忘。
Gin-Vue 启动与配置指南
最新发布
gitblog_01043的博客
09-10 543
Gin-Vue 启动与配置指南 gin-vue项目地址:https://gitcode.com/gh_mirrors/gi/gin-vue 1. 项目目录结构及介绍 由于提供的链接指向了一个不存在的仓库（https://github.com/Bingjian-Zhu/gin-vue.git），我们无法直接获取该特定项目的详细结构。但是，基于常见的Go语言结合Vue.js的项目架构，我可以提供一个...
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-2.启动项目
最强的森的博客
07-21 5489
使用一个后端语言工具，我们只要分为四步就可以进行网站搭建。 1.后端路由 2.接收json数据 3.跨域 4.连接数据库 我们依次解决这四个问题，就可以实现大前端的网站全栈开发工作。 GOLANG（GIN）的路由 1.基本路由 package main import ( "net/http" "github.com/gin-gonic/gin" ) func main() { r := gin.Default() r.GET("/", func(c *gin.Con.
基于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验证，就是登陆页
【从java到Go】Gin框架整合并部署Vue
幽灵雾的专栏
10-21 2886
基于java基础，快速学习Golang 从零在Gin框架中整合并部署Vue
云服务器部署vue项目
qq_39187593的博客
08-28 1196
vue项目进行npm run build的命令， 生成一个dist包。记得开放对应的端口号。
vue-golang-embed-实现前后端不分离部署
aaliliaa的博客
09-25 892
vue golang embed实现前后端不分离部署
宝塔面板部署Vue+Gin项目（吐血整理，各种踩坑）
m0_64091529的博客
01-26 1554
部署Vue+Gin项目（吐血整理，各种踩坑）
Go实战Gin+Vue+微服务打造秒杀商城配套代码
05-27
本项目是基于Go语言的Gin框架，配合前端Vue.js技术栈，以及微服务架构设计的秒杀商城系统。通过这个实战项目，我们可以深入学习如何利用现代Web开发工具和技术来构建一个高性能、高并发的电商应用。以下是相关知识点...
docker-compose编排部署多服务Web应用(python/fastapi, go/gin, nginx, mysql, redis)
IMISer2016的博客
06-19 1732
目前项目涉及到的基础设施有mysql, nginx, redis，服务模块有两个 python/fastapi 和 golang/gin。 如果本地部署的话需要配置的环境有点多，虚拟化（以docker容器形式）是目前（最）流行的部署方法。加上众多编排工具可选择，非常适合Frodo目前多服务的形式。本文先介绍项目的docker部署方法，再以此为例，谈谈docker-compose编排多服务应用的特点和需要注意的地方。希望本文对大家开始实践部署多服务的容器编排应用能有启发~ 项目地址： python/fas.
基于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和Vue的文件管理系统源码.zip
05-27
前端Vue.js应用则可以通过Webpack打包成静态资源，部署到Nginx或Apache等Web服务器。 总的来说，这个基于Golang和Vue.js的文件管理系统结合了两者的优点，提供了一个高效、稳定且用户友好的解决方案。开发者可以...
golang&vue前后端分离项目部署至云服务器
Congz的博客
07-26 2285
golang&vue前后端分离项目部署至云服务器 个人博客地址congz666.gitee.io 所需工具 Docker Nginx Portainer 阿里云服务器 阿里云容器镜像服务 1、docker打包代码并推向阿里云仓库 前端准备 先执行npm run build 打包代码到disk文件夹 nginx.conf server { listen 80; location / { root /usr/share/nginx/html; index ind
Vue + Golang 项目实战（二）：前端部署
YoooKnight的博客
11-28 1516
开始清理一些不必要的代码，只留下一个菜单选项即可。
Golang:Gin+Vue零基础入门教程
weixin_50196917的博客
06-30 1036
一款 Go 语言基于Gin、Xorm、Vue、ElementUI、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式，同时为了敏捷快速开发，框架特地集成了代码生成器，完全自主研发了自定义GO后端服务模板和前端Vue自定义模板，可以根据已建好的表结构，可以快速的一键生成整个模块的所有代码和增删改查等等功能业务，真正实现了低代码开发方式，极大的节省了人力成本
使用golang挂载Vue-dist静态页面
qq_58671071的博客
03-13 273
在部署vue-dist时如果不喜欢使用nignx或者tomcat可以使用这个简单快捷的挂载服务器。喜欢的朋友记得给项目点个星。
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-1.工具和本地环境
最强的森的博客
07-20 2252
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-1.工具和本地环境 相关文章： 技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-1.工具和本地环境 1.前言 之前学习了node.js + vue.js全栈开发，其实就是以node为后端并使用express框架进行前后端分离的全栈项目。 互联网发展日益成熟，要想成为一个称职的全栈工作者，就需要有在一周学会一个新后端工具的能力。 从今天开始我们针对前端全栈，学习使用go后端语言，并使用go
Golang+Vue构建全功能Web应用
热门推荐
Qinng的博客
01-24 1万+
Go+Vue实现前后端管理平台，支持Gin、Postgres、Redis、ELement等
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值