vue项目中 图片突然变为 Object module

package.json中 添加一个 “url-loader”: “^4.1.1”

"dependencies": {
    "axios": "^0.19.0",
    "babel-polyfill": "^6.26.0",
    "cropperjs": "^1.5.6",
    "crypto-js": "^3.1.9-1",
    "driver.js": "^0.9.6",
    "echarts": "^4.2.1",
    "element-ui": "2.11.1",
    "js-cookie": "^2.2.0",
    "moment": "^2.24.0",
    "path": "^0.12.7",
    "svg-sprite-loader": "^4.1.3",
    "tyun-ui1": "^1.0.10",
    "vue": "^2.6.6",
    "url-loader": "^4.1.1"   // 新加
    "vue-cropper": "^0.4.9",
    "vue-i18n": "^8.9.0",
    "vue-kindeditor": "^0.2.1",
    "vue-router": "3.0.1",
    "vuex": "^3.0.1"
  },

vue.config.js中

module.exports = {
  publicPath: '/',
  chainWebpack: config => {
    // 添加新的svg-sprite-loader处理svgIcon
    config.module
    .rule('svgIcon')
    .test(/\.svg$/)
    .include
    .add(resolve('src/icons'))
    .end()
    .use('svg-sprite-loader')  // 一定要添加use
    .loader('svg-sprite-loader')
    .tap(options => {
      options = {
        symbolId: 'icon-[name]'
      }
      return options
    })

    // 原有的svg图像处理loader添加exclude
    config.module
      .rule('svg')
      .exclude
      .add(resolve('src/icons'))
      .end()
    config.resolve.alias
      .set('static',resolve('static'))
 对图片处理  url-loder
    config.module
    .rule('images')
      .use('url-loader')
        .loader('url-loader')
        .tap(options => Object.assign(options, { limit: 2000, esModule: false })); // 配置线上图片转base64。 app 已有做浏览器缓存。转换过大,会加大首屏加载时长
 },

这是因为file-loader默认采用ES模块语法,即import ‘…/image.png’;
然而Vue生成的是 CommonJS模块语法,即require(’…/image.png’);二者不一致。
要么让file-loader或url- loader采用CommonJS语法,esModule: false

https://blog.csdn.net/csstmg/article/details/110172097

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值