自动导入element-plus的图标库icon。

1、安装依赖

npm install @iconify-json/ep@^1.1.14 --save-dev

npm install unplugin-icons@^0.18.2

2、在vite.config.js中引入配置

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

//引入图标icon
import Icons from 'unplugin-icons/vite'
//引入图标解析器
import IconsResolver from 'unplugin-icons/resolver'
//引入自动导入vue相关函数Api插件和按需导入组件插件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

//引入UI库element-plus
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

//配置引用路径，使用@代表src目录
import path from 'path'
//__dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录（当前文件所在的文件夹）
//path.resolve()方法会将路径或路径片段的序列解析为绝对路径
const pathSrc = path.resolve(__dirname, 'src')

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())   //获取环境变量
  return {
    //配置别名
    resolve: {
      alias: {
        '@': pathSrc
      }
    },
    plugins: [
      //vue插件,官方自带识别.vue文件
      vue(),
      //自动导入vue相关函数Api
      AutoImport({
         //自动导入vue相关函数Api，如ref、toRef等
        imports: ['vue'], 
        //按需自动导入element-plus组件必须添加importStyle: "sass"，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色（蓝色）会覆盖自定义的主题色
        resolvers: [ElementPlusResolver({ importStyle: "sass" }),
        // 自动导入图标组件
        IconsResolver({ prefix: 'Icon', })],
      }),
      //按需导入组件插件element-plus
      Components({
        // 自动导入 src/components 目录下的 Vue 组件
        dirs: ["src/components"], 
        //按需自动导入element-plus组件,配置elementPlus采用sass样式配色系统,修改主题色添加这一行importStyle: "sass"，使用预处理样式
        resolvers: [ElementPlusResolver({ importStyle: "sass" }),
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep'],  //在使用icon图标是不能直接使用，比如<Edit />,需要写成<i-ep-edit />
        })],
      }),
      Icons({
        autoInstall: true,
      }),
    ],
    //配置scss全局变量
    css: {
      preprocessorOptions: {
        scss: {
          javascriptEnabled: true,
          // additionalData: `@use "@/styles/variables.scss" as *;`
          additionalData: `@use "@/styles/element-plus/index.scss" as *;`,  //自定义主题色及其自定义样式变量
        }
      }
    },
    //配置前端服务器
    server: {
      port: Number(env.VITE_APP_PORT),  //启动端口,从.env文件中获取,即VITE_APP_PORT（5555）
      open: false,  //是否自动打开浏览器
      hmr: true,   // 热更新是否开启
      proxy: {     //前端服务器内置的代理服务器(如果是后端配置了CORS跨域,则不需要配置代理服务器)
        [env.VITE_BASE_URL_API]: {       //替换的为.env文件中的VITE_BASE_URL_API,即/api
          //http：//127.0.0.1:8002/login
          //现在浏览器传递地址为：http://127.0.0.1:8002/api/login
          target: env.VITE_SERVER_PATH,  //目标服务器地址（后端接口服务器地址）,从.env文件中获取,即VITE_SERVER_PATH (http://127.0.0.1:8002)
          changeOrigin: true,  //是否开启跨域的一些配置
          rewrite: (path) => path.replace(new RegExp("^"+env.VITE_BASE_URL_API),"")  //重写路径,去掉/api,替换的为.env文件中的VITE_BASE_URL_API,即/api，替换成空字符串，请求路径中就没有/api了
        }
      }
    }
  }
})