网站建设微信运营推广今日新闻国家大事

在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 // 处理图片引用不出来的问题 })