Failed to load resource: the server responded with a status of 404 (Not Found) [object%20Module]

在vue项目中，通过webpack的reslove配置路径别名，出现图片加载失败问题。

webpack配置静态资源目录路径别名

module.exports={
	...,
	//配置省略文件路径的后缀名
	resolve: {
	     // 使用的扩展名
	     alias: {
	         '@static': resolve('static')
	     }
	 }
}

图片引用

<div>
  <img src="~@static/images/error.png" alt="Computerman" />
</div>

结果出现

报错！

解决方案

在webpack模块规则中，给图片的第三方加载器的匹配规则中，添加esModule: false

module.exports={
	...,
	// 所有第三方文件模块的匹配规则,打包规则
	module: {
	     // 使用的扩展名
	     rules: [
	         {
                test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 16940,
                        esModule: false,
                    }
                }
            },
	     ]
	 }
}