imageUrlLoaderOption 的 publicPath 配置项不生效



  • 配置

    mini: {
        imageUrlLoaderOption: {
             publicPath: 'https://a.b.c.com/'
        }
    }
    

    在 .less 编写代码

    .index{
      color: red;
      background-image: url(./n.png);
    }
    

    然后运行 npm run dev:swan
    编译报错
    报错截图

    预期效果:编译出的css文件为:

    .index{
      color: red;
      background-image: url(https://a.b.c.com/n.png);
    }
    


  • 仔细看一下 miniimageurlloaderoption 的说明,taro 默认使用的是 url-loader ,url-loader 就是将资源处理成 base64 直接放在代码中的,并没有将资源提出来,你设置的 publicPath 不是 url-loader 的配置项当然不会生效,你应该在 fallback 中配置 file-loaer 就能达成你要的效果了,配置类似于这样

      mini: {
        /** 
         * 文件大小超过 0 字节对应文件会被处理到 name 属性所指定的地址中
         * 文件大小小于 0 字节会被处理成 base64 直接嵌入到代码中
         */
        imageUrlLoaderOption:{
          limit: 0, // 单位为 byte 字节
          fallback: {
              loader: 'file-loader',
              options: {
                  outputPath: 'static/images',
                  name: '[name].[hash:7].[ext]',
                  publicPath:'',
                  // publicPath:'http://xxx.com/',
              },
          }
        }
      },
    

登录后回复