从java到GoGin框架整合并部署Vue

Posted 猿人林克

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从java到GoGin框架整合并部署Vue相关的知识,希望对你有一定的参考价值。

【提问】

如何将Vue整合到Go的Web框架Gin中?

【解答】

本文以本文以vue3+vite.config.dev.ts为例,具体步骤如下:

1、vue中修改package.json配置

新建Vue工程或打开已有Vue项目,打开package.json文件,在「根.scripts.build」为build命令进行配置,如下:


	// 省略部分...
	"scripts": 
		"dev": "NODE_ENV=development vite --config ./config/vite.config.dev.ts",
		// 这里配置build命令,根据./config/vite.config.dev.ts文件中的配置运行
		"build": "vite build --config ./config/vite.config.dev.ts",
		"report": "cross-env REPORT=true npm run build",
		"preview": "npm run build && vite preview --host",
		"type:check": "vue-tsc --noEmit --skipLibCheck",
		"lint-staged": "npx lint-staged",
		"prepare": "husky install"
	
	// 省略部分...

2、vue中修改vite.config.dev.ts配置

上述package.json中./config/vite.config.dev.ts文件用来配置运行参数,核心配置如下:

import  mergeConfig  from 'vite';
import requireTransform from 'vite-plugin-require-transform';
import baseConfig from './vite.config.base';
import prismjs from 'vite-plugin-prismjs';

export default mergeConfig(
  
    mode: 'development',
    server: 
      host: 'www.fullstars.cn',
      port: 8000,
      fs: 
        strict: true,
      ,
      https:false
    ,
    plugins: [
      prismjs(
        languages: 'all',
      ),
      requireTransform(
        fileRegex: /vuePdfNoSss.vue$/,
      ),
    ],
  ,
  baseConfig
);

3、编写Vue中router/index.ts代码

为了方便测试,我们配置一个默认的/v/链接和一个主页面的/v/main链接,如下:

import  createRouter, createWebHistory  from 'vue-router';
import NProgress from 'nprogress'; // progress bar
import 'nprogress/nprogress.css';

NProgress.configure( showSpinner: false ); // NProgress Configuration

const router = createRouter(
  history: createWebHistory(),
  routes: [
    
      path: '/v/',
      redirect: '/v/main',
    ,
    
      path: '/v/main',
      name: 'main',
      component: () => import('@/views/main/mainView.vue'),
    ,
    
      path: '/v/:pathMatch(.*)*',
      name: 'notFound',
      component: () => import('@/views/not-found/notfoundView.vue'),
    ,
  ],
  scrollBehavior() 
    return  top: 0 ;
  ,
);

export default router;

4、Vue编译打包

上述配置完成后,进入Vue工程的目录,执行如下代码,进行Vue的编译打包:

 sudo npm run build

执行结果如下,打包后的文件会输出到项目的/dist目录中,包含「assets」文件夹和index.html文件:

5、Gin中整合index.html

打开Go项目,在main.go中添加静态资源的载入,以及vue链接的匹配,具体如下:

package main

import (
	"embed"
	"github.com/gin-gonic/gin"
	"net/http"
)

//go:embed v.html
var Static embed.FS

func main() 
	router := gin.Default()
	// 加载静态资源
	router.StaticFS("/vue", http.FS(Static))

	// 匹配vue中的/v/*链接,跳转至vue入口文件,vue会自动进行路由
	router.GET("/v/*name", func(c *gin.Context) 
		c.Request.URL.Path = "/vue/v.html"
		router.HandleContext(c)
	)
	// 匹配/链接,重定向到主页
	router.GET("/", func(c *gin.Context) 
		c.Redirect(http.StatusFound, "/v/main")
	)

	// 其他接口
	router.GET("/other", func(c *gin.Context) 
		c.String(http.StatusOK, "Hello world!这是一个GET接口")
	)
	router.Run(":80")

在代码中,一定要声明embed.FS,同时增加「go:embed」注释,用以载入指定的静态文件,这里的v.html就是Vue打包后的index.html(这里要特别注意,go对关键字很敏感,所以不要使用index作为文件名,这里改为v),其他的静态文件通过远程文件进行引入(传到oss或者其他云,详见另一篇文章:【从java到Go】vue3打包发布到OSS

//go:embed v.html
var Static embed.FS

上述的配置,v.html要和main.go在同一路径:

6、运行测试

运行Go项目,同时访问http://localhost,会根据Gin中router的配置,自动跳转到http://localhost/v/main(其中/v/main是我在Vue中定义的默认路由):

以上是关于从java到GoGin框架整合并部署Vue的主要内容,如果未能解决你的问题,请参考以下文章

gogin web框架部署学习

GoGin从入门到精通—如何理解安装Gin并在本地运行

GoGin从入门到精通—如何理解安装Gin并在本地运行

django + vue整合后,部署到windows apache遇到的问题汇总

GoGin从入门到精通—搭建MVC项目结构学习路由配置

vue项目创建和部署使用