vuecli2 和 vuecli3 打包本地线上预览问题解决

参考博客111

问题一： 写好的vue项目上传到GitHub中，但是预览的时候却是一片空白；
或者问题二： 打开 dist 文件下的 index.html 页面空白。

1， vuecli2 打包本地线上预览 解决

1-1，找到config>index.js文件，打开这个文件，找到build（注意是build不是dev）这个对象下面的assetsPublicPath的值改成 ‘./’

此外，还有另外一个方法可以解决这个问题，就是在项目文件夹下找到build>webpack.prod.conf.js，打开该文件夹，找到output对象，然后添加一行代码 publicPath: ‘./’，同样可以起到效果。

1-2，项目中背景图片的路径问题–无法加载

如果你的项目文件中的css代码以类似这样的方式引入背景图片：background-image: url(…/assets/main-view/icons/seafood.png)，
这时项目打包后，打开index.html文件可能会无法显示该背景图片，
这其实也是图片路径的问题，这时你需要在项目文件中找到build>utils.js文件，然后打开该文件，
在generateLoaders( )这个函数下面添加一行代码 publicPath: ‘…/…/’ 即可解决背景图片无法显示的问题。
再重新npm run build，成功后再打开 dist 下面的 index.html 就可以预览了，但是图片还是不能无法加载。。。

打开根目录下 build 中的　utils.js　文件，在控制build样式文件代码中添加　publicPath: ‘…/…/’，

现在打开 dist 文件下的 index.html 页面就可以正常预览了

2， vuecli3 打包本地线上预览 解决

npm run build 打包之后