Configure the image alias of file-loader in vue cli4

Configure the image alias of file-loader in the project created by vue cli4 (scaffolding 4)

Because there is no webpack.config.js in the project created by scaffolding 4, we directly create a vue.config.js in the project

put the configuration inside

module.exports = {
	configureWebpack: {
		module: {
			rules: [{
				test: /\.(png|jpe?g|gif|webp)$/i,
				use: [{
					loader: 'file-loader',
					options: {
						// 将图片输出到某个文件夹中
						outputPath: "images",
						// [name] 为图片的原始名称, [hash:6] 保留6位哈希值, [ext] 为图片的原始后缀名
						name: "[name]--[hash:6].[ext]"
					}
				}, ],
			}, ]
		}
	},

    .....其他配置
	


}

Note: Every time you modify the configuration file, you should recompile npm run serve / npm run dev (depending on how you run it)