vue使用webPack打包发布后页面显示空白的解决
作者：妞我想和你一辈子
这篇文章主要介绍了vue使用webPack打包发布后页面显示空白的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
使用webPack打包发布后页面显示空白
今天笔者将打包后，进行访问，访问到index.html，但是出现的是空白页。
打包命令：npm run build，打包后的文件如下：
这是因为index.html中引入的css ,js 的路径不对:如下图
这个是因为webpack打包的时候引入js时使用的是绝对路径导致的，修改webpack打包文件中的配置，在webpack.prod.conf.js中增加publicPath:'./' ,util.js中增加publicPath:'./'，修改config/index.js
修改完后：重新打包，网页展示成功。
vue+webpack项目打包问题
1、vue项目打包出现空白页面
报错页面
解决：将config/index文件里的assetsPublicPath改为‘’./‘’
重新打包
2、vue+elementui项目打包后样式覆盖问题
解决：main.js中的引入顺序决定了打包后css的顺序，组件内的样式没有生效可能是被第三方组件样式覆盖了，所以把第三方组件放在前面引入，router放在后面引入，就可以实现组件样式在第三方样式之后渲染
3、vue项目打包后elementui图标丢失问题
报错页面
解决：在build/utils文件如下位置添加publicPath:‘…/…/’
重新打包
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。