vue-cli部署到tomcat服务器教程

• 很多时候我们发现辛辛苦苦写的VueJs应用经过打包后在自己本地搭建的服务器上测试没有什么问题，但真正放在服务器上后，会发现或多或少的问题，比如：页面出现空白现象，获取资源路径不对等，我相信以VueJs为技术栈来进行前端开发的小伙伴或多或少都会遇到这样的问题，我也遇到过，那现在我们就来一一解决这样的问题。
• 闲话少说，说一个页面出现空白的解决办法：

1. 【修改index.js】: 修改config目录下的index.js，将assetsPublicPath: '/'改为assetsPublicPath: './'，注意，有两处，都要改，不然打包部署到tomcat上面访问是一片空白；

image.png

image.png

2. 【打包】:项目文件目录下运行命令：npm run build，将项目打包好，然后当前项目目录下有一个dist文件夹，该文件夹下有一个index.html和static文件夹

image.png

3. 【tomcat部署】:现在，在tomcat的webapps文件夹下以项目名称新建一个文件夹，比如winter文件夹，然后将index.html和static文件夹复制到winter文件夹下，现在就可以启动服务器了，访问正常。

image.png

4. 效果如下图：

image.png