// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

此处有坑！

在本地开发环境，点击菜单切换的时候，新开的页面的加载非常慢，往往过了几十秒才能渲染出来。研究了好一阵，才发现是按需导入的问题 # 使用按需引入时，首次启动服务会依赖预构建style #361

由于采用按需导入，在每次渲染新路由，会对element的组件样式进行依赖预构建，导致页面卡在半路上。

打开F12即可验证，每次切换新的路由，网络都会加载对应Element组件的css。

要解决这个问题，最简单的处理方式是修改为全量导入Element Plus，但是按需导入也有它的突出的优点。所以折衷的解决方案是开发环境全量导入，其他环境保持按需导入。

参考某位大佬的文章：
[https://blog.csdn.net/qq_42611074/article/details/127685501](# unplugin-vue-components按需导入element-plus样式导致vite加载页面耗时变得很久)

plugins: [
     ...
      Components({
        resolvers: [ElementPlusResolver({
          importStyle:mode==="development" ? false:'sass'
        })]
      }),

     // 使用unplugin-vue-components按需加载样式，开发环境会导致项目异常卡顿
      // 导致原因：vite会预加载style，当首次启动 vite 服务时会对 style 进行依赖预构建，，因为element-plus的按需样式会导入大量style文件，导致页面会卡住直至style构建完成
      // https://github.com/antfu/unplugin-vue-components/issues/361
      // 这里自定义一个vite插件，更改src/main.js内容，开发环境全局引入样式
      {
        name: "import-element-plus-style",
        transform(code, id) {
          if (/src\/main.ts$/.test(id)) {
            if (mode === "development") {
              return {
                code: `${code};import 'element-plus/dist/index.css';`,
                map: null,
              }
            } else {
              return {
                code: `${code};import 'element-plus/theme-chalk/src/message-box.scss';import 'element-plus/theme-chalk/src/message.scss';`,
                map: null,
              }
            }
          }
        }
      },
    ...
    ],