vue项目打包上传服务器 - vue-cli2 + vue-cli3 空白页，资源无法加载等常见问题解决

当我们将 vue 项目完成后，面临的就是如何将项目进行打包上线，放到服务器中。我使用的是 vue-cli（simple） 脚手架，所以就讲一下如何将项目进行打包，并放到 tomcat 上。
如果是 vue-cli (非 simple 脚手架)，这篇文章可能有点帮助。地址链接：vue-cli 如何打包上线

先来描述一下期间遇到的问题有哪些：

1、打包后将 dist 文件夹和 index.html 放到 tomcat，在浏览器中访问时，出现空白页，f12 提示 404。
2、打包好的静态资源均是绝对路径，无法引入进项目，也是 404。

1、项目目录结构

这是打包后的，所以有 dist 文件夹，打包方式：npm run build。

2、webpack.config.js

这里只是一小部分，因为这边最关键的就是 publicPath,下面会提，这边可以解决静态资源 404 无法引入的问题。

3、npm run build 打包后的文件。

npm run build 打包后生成一个 dist 文件夹，这里面的目录：

我对 webpack 打包工具的原理不是很清楚，所以文件夹应该生成什么不是了解