解决Vue项目打包后打开index.html页面一片空白并报图片路径错误或者图标没有正常显示的问题

众所周知，Vue项目打包（运行npm run build）之后会生成一个dist文件夹，dist文件夹里有一个static文件夹和一个index.html页面，这个index就是单页面的最终文件。我们一般都是把dist文件夹部署到服务器上。

但是我直接打开index.html，发现页面显示的是一片空白，打开控制台发现报了一堆找不到文件的error：

于是我看了下代码，应该是路径不对，应该是 './static/...' 而非 '/static/...' 。

此时来到config/index.js文件中，发现assetsPublicPath:'/'，'/'是根目录，显然index.html文件的根目录是系统盘，在系统盘目录下找static文件夹肯定是找不到的，所以我们要把assetsPublicPath属性的值改为'./'（当前目录）

修改好之后，重新打包之后打开index.html，页面出来了，查看elements也发现路径对了：

但是图片和字体图标等静态资源没有正确显示出来，控制台报以下错误：

发现图片和字体等请求路径不对！比如loginbg的正确路径应该是：file:///E:/ztt/hzaspt/hzaspt-front/dist/static/img/loginbg.8250815.jpg

前端代码如下：

但是打包之后，图片的路径应该是 './static/img/loginbg.jpg'，原因就在这里。

此时我们只需要找到build/util.js文件，在 'vue-style-loader' 之后加一行：publicPath: '../../'，就可以解决问题了。

重新打包之后，打开index.html，页面一切正常！