处理vue直接引入图片地址时显示不出来的问题 src=“[object Module]“

在webpack中使用vue-loader编译template之后，发现图片加载不出来了，开发人员工具中显示src=“[object Module]”

这是因为当vue-loader编译template块之后，会将所有的资源url转换为webpack模块请求

这是因为vue使用的是commonjs语法规范，而file-loader/url-loader使用的es module语法规范，解决方法是处理图片时不适用es module的语法

我们需要在vue.config.js里面稍加配置就可以了

 // 编译图片
    config.module
      .rule('images')
      .test(/\.(png|jpeg|gif|jpg)$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 1024 * 10, // 小于10k的图片采用baseurl，大于和等于10k的就正常打包成图片
        name: 'static/[name].[ext]',
        esModule: false // 处理图片引用不出来的问题 
      })