1.打包前的配置

打开vue.config.js配置如图所示内容

//打包配置文件
module.exports = {assetsDir: 'static',parallel: false,publicPath: './',
};

这段代码是Vue.js项目的打包配置文件，主要功能包括：
- `assetsDir: 'static'` - 设置静态资源文件夹名为'static'
- `parallel: false` - 关闭并行编译处理
- `publicPath: './'` - 设置打包后文件的公共路径为相对路径
用于配置项目构建时的资源目录和路径引用方式。 

在index.js中配置

const router = new VueRouter({mode: 'hash',base: process.env.BASE_URL,routes
})

这段代码创建了一个Vue Router实例，用于管理Vue应用的路由。
- `mode: 'hash'`：使用URL hash模式进行路由
- `base: process.env.BASE_URL`：设置应用的基础路径
- `routes`：传入路由配置数组
该路由器将根据URL变化渲染对应的组件。  

上面的process.env.BASE_URL是啥？

这是我们在request.js做中对环境做的一个配置 

而 VUE_APP_BASEURL 正是我们在.env.development（开发环境）文件和.env.production（发布环境）文件中配置的ip:port，我自己的项目配置如下：

VUE_APP_BASEURL='http://localhost:9090' // 后端服务地址

2.项目打包

终端运行命令 npm run build
运行成功后会生成dist文件

将dist文件复制存放于resources/static目录下 

3.后端配置 

这段代码的功能是配置静态资源处理器：

addResourceHandler("/**")：匹配所有路径的静态资源请求
addResourceLocations("classpath:/static/")：指定静态资源的查找位置为classpath下的static目录
这样配置后，项目可以正确访问和加载位于static文件夹中的静态资源文件（如CSS、JS、图片等）。

添加路径使其访问dist下的文件不被jwt拦截。 

4.重定向前端入口页面 

    @GetMapping("/")public void hello(HttpServletResponse response) throws IOException {// 重定向到前端入口页面response.sendRedirect("/dist/index.html");}

此时访问/即可跳转如图链接

使用Vue打包后本地运行的优势在于：将代码提供给他人时，对方只需启动SpringBoot服务即可实现前后端交互，无需再通过npm run serve命令运行前端服务。

如果我的内容对你有帮助，请辛苦动动您的手指为我点赞，评论，收藏。感谢大家！