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

可以的大家点点关注-总结不易谢谢大家-也可以留言需要哪类的我也可以尝试