在vue cli4中 配置file-loader 的图片别名

在vue cli4(脚手架4) 创建的项目中 配置file-loader 的图片别名

因为脚手架4创建的项目中没有webpack.config.js 所以我们在项目中直接创建一个vue.config.js

将配置 放在里面

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]"
					}
				}, ],
			}, ]
		}
	},

    .....其他配置
	


}

注意:每次修改配置文件你都应该重新编译 npm run serve / npm run dev (具体看你的运行方式了)