The vite.config.ts configuration of the vite project

 Configure element-plus to automatically import on demand, @ path alias, less can configure global variables

// vite.config.ts
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite' //elements-plus自动引入
import Components from 'unplugin-vue-components/vite'//自动引入
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'//自动引入
import path from 'path'; //node的路径，必须安装@types/node来拓展node语法
export default defineConfig({
    plugins: [
        vue(),
        //配置elements-plus自动按需引入
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ],
    resolve: {
        alias: {
            // 配置路径别名@
            "@": path.resolve(__dirname, "src"),
        },
    },
    css: {
        preprocessorOptions: {
            less: {
                modifyVars: {
                    //配置less全局变量都可用
                    hack: `true; @import (reference) "${path.resolve(__dirname, 'src/assets/global.less')}";`,  // src/assets/global.less 是你需要全局变量 （你定义的定义的方法 和 变量等）
                },
                javascriptEnabled: true
            }
        }
    }
})