src=“[object Module]“ 的原因及解决方案

使用webpack4构建的项目，出现 src="[object Module]" 的原因及解决方案。

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

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

对于图像我们在Webpack中一般使用 url-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
  }
}