vue打包后如何在本地运行？

1.打包前的配置

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

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

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

在index.中配置

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.做中对环境做的一个配置 

而 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、图片等）。

image.png

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

4.重定向前端入口页面 

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

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

image.png

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

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