升级weback4.0 加载<img>图片报[object%20Module]错误

Posted 2023-02-21

参考技术A 问题：vue项目中html中的<img>对应的图片打包后为<img src="[object Module]" alt="">
思路：
url-loader 是图片、文件加载器，可能是打包配置不对。
处理：
webpack.base.conf.js中
插件的配置

test: /.(png|jpe?g|gif|svg)(?.*)?$/,
use:
loader: 'url-loader',
options:
limit: 10000,
name: utils.assetsPath('images/[name].[hash:7].[ext]'),
esModule:false


,
重点是：esModule:false
理由：
url-loader默认采用ES模块语法，即import '../aaa.png'；然而Vue生成的是CommonJS模块语法，即require('../')；二者不一致。要么让file-loader或url-loader采用CommonJS语法，要么让Vue采用ES语法。

url-loader中的属性esModule选项能调整，将其设置为false即可，就关闭了es模块语法