解决Vue中img图像src变成"[object Module]"无法正确加载的问题

问题描述

Vue官方文档中说了vue-loader的基本原理，他会将Vue模板中的转为下面这段JS代码：

createElement('img', {
  attrs: {
    src: require('../image.png')  // require()是CommonJS模块语法
  }
})

对于图像我们在Webpack中肯定会使用url-loader或file-loader来处理：

{
  test: /\.(png|jpe?g|gif|svg)$/,
  loader: 'url-loader',
  options: {
    limit: 1024
  }
}

然而这样最后生成的图像会变成，无法显示。

解决方案

这是因为file-loader默认采用ES模块语法，即import '../image.png'；然而Vue生成的是CommonJS模块语法，即require('../image.png')；二者不一致。要么让file-loader或url-loader采用CommonJS语法，要么让Vue采用ES语法。

刚好file-loader或url-loader有一个esModule选项能调整，将其设置为false即可：

{
  test: /\.(png|jpe?g|gif|svg)$/,
  loader: 'url-loader',
  options: {
    limit: 1024,
    esModule: false
  }
}

总结

现在是2020年01月18日，然而目前在Webpack的中文文档中根本没提到esModule这个参数，只有Webpack英文文档中提到了，大家可以去看看。

所以说尽量还是看英文文档吧，英文真的是大多数从业者提升技术的门槛啊。