Vue打包部署到Tomcat服务器

我使用的是Vue-cli(simple)脚手架,目录结构更为简洁。
Vue打包部署到Tomcat服务器
修改相关的配置,避免部署后常出现的空白页问题,而引起这个问题的根本原因是资源路径问题:
1.一个是index.html中的build.js路径问题;
2.一个是dist中静态资源路径问题。

在webpack.config.js中

加.,将绝对路径改为相对路径。
Vue打包部署到Tomcat服务器

在index.html中

同样加.,改为相对路径。
Vue打包部署到Tomcat服务器

打包

在控制台运行npm run build命令开始对项目进行打包,打包后生成dist目录。

部署

新建一个项目目录如:pahms,将新生成的dist目录和原项目文件中的index.html复制到pahms目录中,然后再将pahms目录放到tomcat的webapps目录下启动即可。

提示

在打包过程中最容易出现的问题就是路径问题,如果页面显示异常,可以打开浏览器的开发者调试工具,通过network查看加载失败的资源路径具体是怎样的,然后自己做出相应调整即可。