【前端】从vben中学到的一些工程化技巧

记录一些使用vben时学习到的新的技巧。

本地图标还是在线图标

使用 iconify，是从线上的 Public host 获取图标，当需要本地化（如部署到局域网内），可以借用 purgeIcons 来实现。

对于 vite 有相应的插件 vite-plugin-purge-icons

// vite.config.js
import PurgeIcons from 'vite-plugin-purge-icons';

return {
   
	plugins: [
		// ...
    	PurgeIcons({
   
	      content: ['**/*.html', '**/*.js', '**/*.ts', '**/*.vue', '**/*.jsx', '**/*.tsx', '**/*.json'],
	    })
	]
}

这样可以自动提取所有使用到的图标，打包在 '@purge-icons/generated' 下，加在main.js 或者 Icon组件中即可。

import Iconify from '@purge-icons/generated';

// Icon 组件
const svg = Iconify.renderSVG(icon, {
   }