解决：IDEA上Vue项目打包部署到Tomcat上页面空白问题

前提，首先服务器(Linux系统)88.88.88.11上部署了Tomcat,假设端口默认8080；

一、带config文件夹的vue项目打包；

1、首先vue项目能成功运行并且有显示的内容；

2、找到config/index.js文件做修改；

 修改config/index.js中dev与build中的 assetsPublicPath后 "/" -> "./" ；

如果不修改，Tomcat上运行时会显示空白页面

3、Terminal终端执行 npm run build 生成 dist 文件夹

 

4、文件夹上传到Tomcat安装目录的webapp目录下；

运行Tomcat

 打开浏览器访问服务器 88.88.88.11:8080/{webapp下dist文件夹}, dist 文件名可更改

二、不带config文件夹的vue项目打包；

1、找到vue.config.js文件

2、修改或增加内容如上图

 publicPath: '././'

'././' or 'webApp/dist/' 代表路径

为dist文件夹中index.html文件相对于Tomcat中webApp文件夹的位置

3、Terminal终端执行 npm run build 生成 dist 文件夹 ，

上传至服务器Tomcat的webApp目录下更名文件夹为dist2

运行Tomcat，打开网页：

 切记路径错了可能会出现空白页面，

F12控制台报错：找不到啥子资源文件（... can't found ... 404）相关的