vue 打包后找不到资源文件

13 篇文章 0 订阅
6 篇文章 0 订阅

前一段时间我们写了一个项目,在本地是好的,但是布到线上发现有些字体图标找不到,然后就各种找问题,最后确认是资源文件路径没引用正确导致的,
下拉框的字体变成小方块
怎么解决呢:
1、在build的utils文件中配置
原来是

if (options.extract) {
      loaders.push(MiniCssExtractPlugin.loader)
    } else {
      loaders.push('vue-style-loader')
    }

改成

if (options.extract) {
   return ExtractTextPlugin.extract({
     use: loaders,
     publicPath:'../../',           // 此处添加
     fallback: 'vue-style-loader'
   })
 }

或者
2、在config的index.js中的, 原因是vue项目打包后样式目录结构变为static/css

build:{
 assetsPublicPath: '/',
 ...
  //改为
 assetsPublicPath: '../../',

或者
3、在build的 webpack.base.conf.js 文件中配置
打包前:路径是http://localhost:8080/static/…
打包后:路径是/dist/static/css/static/fonts/iconfont.1a028ec.woff

百思不得其解的是-上面文件的实际位置在:/dist/static/fonts/iconfont.1a028ec.woff

一顿网上搜索终于找到一个有用的答案:参考官方文档url-loader

当文件的大小小于limit的值时,使用base64进行转码,你可以在打包好的css中进行查证,看所引用的字体和图片是不是base64格式的,如果大于limit的值,就使用file-loader进行解析,不会使用base64,而是采用路径引入。

修改 limit的值,将其值变大 10000000

{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
   loader: 'url-loader',
   options: {
     limit: 10000,
     name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
   }
 }
改为
{
   test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
   loader: 'url-loader',
   options: {
     limit: 10000,
     // name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
     name: ('[name].[hash:7].[ext]'),
     publicPath: '../fonts',
     outputPath: utils.assetsPath('fonts/')
   }
 }      

希望对各位老铁有用!!!!!!!!!!!!

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值