vue如何才能正确打包,文件加载不会出错

1.修改css文件的加载路径
修改在项目根目录中的build目录中util.js,你不修改的话打包出来的路径是在static/css下的,举个例子如果你的css文件中在开发环境中引入了一个字体文件,但是打包后他css文件寻找路径是在static/css/你的字体文件,static/css显然不是我们想要的,我们的目录是往上两个层级目录中的。因此要加上注释中的标明的语句

// Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        //加上这一句
        publicPath:'../../',
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

2.修改打包后加载文件路径
找到config/index.js,

在那个build的对象中修改assetpulblic的值为./

3.静态资源及动态路径图片的处理
这是一个大坑,相信很多人在尝试使用动态图片路径的时候发现报错,然后百度发现有人说把静态资源放到时/static目录下,nice,这波,我相信很多人都会这样做,but,打包之后,所有图片资源都会用/static路径进行寻找。除非你的web服务器根目录配置就是dist目录,/static就不会报错,但是如果你的的web服务顺根目录配置不是dist目录,dist目录只是一个子文件夹,那么/static就会不存在。
而且如果你想要进行webapp的本地打包,把资源都放在本地,打包成webapp的话。你的/static肯定就凉。那么如何才能正确使用图片呢?

4.在vue-cli中正确使用图片
查看webpack.base.conf,默认有一个@的resolve的目录指向的src,因此所有vue组件中(样式不能,样式只有通过路径不能通过@)请求的静态资源文件 路径,都可以这样@/路径/文件,@指向的是src。打包后就可以正确使用了。
那么还有一个需求,使用动态路径比如果说我在vuex中存一个默认用户头像路径,想用动态的方式。
经过一波百度,可以这样

userImg:require('@/static/images/default_user.png')//用户头像

还是要给webpack进行解析

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值