vue打包后elementui部分样式丢失

最近在搭建一个vue+ElementUI+Vuex项目,打包时发现了有几个问题,解决后特地记录一下,以免下一次有遇到类似的问题。

一.页面一片空白并报错Failed to load resource: net::ERR_FILE_NOT_FOUND

第一次打包后发现页面一片空白,并且报错Failed to load resource: net::ERR_FILE_NOT_FOUND

然后上网发现更改一下配置就行了。

1.webpack.prod.conf.js 中output添加参数publicPath:’./’
在这里插入图片描述
2.修改webpack.base.conf.js中:

publicPath: process.env.NODE_ENV === 'production'

? './' +config.build.assetsPublicPath

: './' + config.dev.assetsPublicPath
 

3.如果还有问题:找到config文件里面的index.js文件
修改build里面的assetsPublicPath;
在这里插入图片描述
我是第三步本来就已经是这样设置的所以,第三步没有更改。

然后打包,页面就不再是一片空白了。

但是有出现了新的问题,发现部分Element UI 样式失效,如下图,icon变成方框了
解决办法:在build文件夹下找到utils.js,加上一行publicPath:’…/…/’
在这里插入图片描述

然后再打包,打开index.html文件就能看到图标正常显示啦。

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值