VUE打包后显示为空白页的解决办法（包括vue-element-admin项目）

注意：vue-element-admin 项目打包后显示为空白页的解决办法直接拖到文章最后。

---

问题描述：

VUE 项目用指令 npm run dev 运行后打开网址可以正常显示网页内容，但是用指令 npm run build 进行打包部署后，生成的dist文件夹中 index.html 文件在浏览器中打开为空白页。

---

解决方案：

在项目中打开【config】文件夹中的【index.js】文件，如下图所示，找到【build】里面 assetsPublicPath: ‘/’ 这行代码，并将其改为 assetsPublicPath: ‘./’ （在斜杠前加点）。
注意：一定要改【build】里面的代码，不要改成【dev】里面的。

重新用指令 npm run build 进行打包部署即可，生成的dist文件夹中 index.html 文件在浏览器中打开后显示如下：

---

vue-element-admin 运行并且打包部署后显示为空白页的解决办法：

正常vue项目是要修改 config 文件夹下的 index.js 可是 vue-element-admin 项目没有这个文件，那就找到并且打开vue.config.js，将 publicPath: ‘/’ 改成 publicPath: ‘./’ 。
再次执行，npm run build:prod 命令，重新打包。

这时在本地打开静态文件dist里面的 index.html 页面点击登录按钮无法跳转，但是部署到服务器上是可以正常登录的。

vue-element-admin 运行并且打包部署教程