vue 打包后找不到资源文件

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

 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/')
   }
 }      

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章