vue使用webPack打包发布后页面显示空白的解决
更新时间：2023年06月08日 09:03:43 作者：妞我想和你一辈子
这篇文章主要介绍了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:‘…/…/’
重新打包
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue中,通常需要将图片存储在服务器端,并通过url地址来访问,下面这篇文章主要给大家介绍了前端vue如何通过URL访问存储在服务器或磁盘的图片的相关资料,需要的朋友可以参考下2024-02-02
Vue 应用在首屏加载时速度过慢,通常与以下问题有关：打包文件过大、网络请求过多、资源加载过慢,针对这些问题,本文给大家介绍了Vue首屏加载过慢的优化方法,需要的朋友可以参考下2025-01-01
vue-cli项目使用mock数据的方法（借助express）
现如今前后端分离开发越来越普遍，前端人员写好页面后可以自己模拟一些数据进行代码测试，这样就不必等后端接口，提高了我们开发效率。今天就来分析下前端常用的mock数据的方式是如何实现的,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了详解element-ui中表单验证的三种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了vue使用vuedraggable插件实现拖拽效果,本文分步骤介绍了安装vuedraggable插件的方法及页面引入的方法,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue中解决异步交互数据出现延迟问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要介绍了如何本地运行vue dist文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要为大家详细介绍了vue实现表单验证小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
Vue quill-editor 编辑器使用及自定义toobar示例详解
这篇文章主要介绍了Vue quill-editor编辑器使用及自定义toobar示例详解,这里讲解编辑器quil-editor的知识结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Vue数据回显表单无法编辑的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-11-11
最新评论