vue2.0+elementui集成file-loader之后图标失效问题

不cong明的亚子2023-11-24 12:18

背景

跑vue2+elementUI项目时，由于前端这边需要在本地存放xlsx模板文件，供用户下载模板文件，所以需要在webpack构建的时候增加file-loader进行解析xlsx文件打包。

vue版本2.x

element-ui 版本 2.13.x

注意

bash 复制代码

npm i -D file-loader@版本号

给vue项目安装file-loader的时候，需要尽量保证这个的版本同node_modules中element-ui中的file-loader版本相同，（避免不必要的问题）

vue.config.js(链式webpack)

javascript 复制代码

module.exports = {
	....

		// 添加对 .xlsx 文件的处理规则
		config.module
			.rule("xlsx")
			.test(/\.xlsx$/)
			.use("file-loader")
			.loader("file-loader")
			.options({
				name: "[name].[hash:8].[ext]"
			})
			.end();

		...
	},
};

重新启动vue项目，可以看到图标已经出来了！！！
如果有什么新问题，欢迎留言评论！！