Vue打包部署到Tomcat服务器

我使用的是Vue-cli(simple)脚手架，目录结构更为简洁。

修改相关的配置，避免部署后常出现的空白页问题，而引起这个问题的根本原因是资源路径问题：
1.一个是index.html中的build.js路径问题；
2.一个是dist中静态资源路径问题。

在webpack.config.js中

加.，将绝对路径改为相对路径。

在index.html中

同样加.，改为相对路径。

打包

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

部署

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

提示

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