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的几种绑定变量的值 防止其改变的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue3中依赖注入provide、inject的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章简单给大家介绍了Vue项目中使用keep-Alive步骤，在vue2.1.0之前，实现方式也给大家作了简单介绍，感兴趣的朋友跟随脚本之家小编一起看看吧2018-07-07
这篇文章主要为大家详细介绍了vue2实现手势密码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
在编写Vue代码的时候,经常会碰到各种权限问题,本文主要介绍了Vue按钮权限的实现示例,具有一定的参考价值,感兴趣的可以了解一下2024-08-08
这篇文章主要介绍了使用Vue-cli 中为单独页面设置背景图片铺满全屏，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
本文主要介绍了ElementUI+命名视图实现复杂顶部和左侧导航栏，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要介绍了从0到1搭建Element的后台框架的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
Vue3中我们经常需要使用defineProps来定义组件的属性,本文主要介绍了Vue3中defineProps设置默认值的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-07-07
本文主要介绍了elementui导出数据为xlsx、excel表格，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论