vite-plugin-style-import 动态按需引入element-plus

安装 npm i vite-plugin-components -D

npm i vite-vite-plugin-style-import -D

import { defineConfig } from 'vite' // 使用 defineConfig 帮手函数，这样不用 jsdoc 注解也可以获取类型提示
import vue from '@vitejs/plugin-vue'
// import styleImport from 'vite-plugin-style-import' 
//2.0之后版本用createStyleImportPlugin
import { createStyleImportPlugin, VantResolve } from 'vite-plugin-style-import';
import ViteComponents, { ElementPlusResolver } from 'vite-plugin-components'
const { resolve } = require("path");
 
export default ({ command, mode }) => {
  let isProd = (command === 'build') // 情景配置 是否为开发模式  serve 或 build
  return defineConfig({
    plugins: [vue(),
       //按需导入element-plus组件
         ViteComponents({
             customComponentResolvers: [ElementPlusResolver()],
         }),
         //按需导入element-plus的css样式
        //  styleImport({
        //      libs: [
        //          {
        //              libraryName: 'element-plus',
        //              esModule: true,
        //          resolveStyle: (name) => {
        //              return `element-plus/lib/theme-chalk/${name}.css`
        //              },
        //          },
        //      ],
        //  }),
          createStyleImportPlugin({
          resolves: [VantResolve()],
        }),
    ], //查看 插件 API 获取 Vite 插件的更多细节 https://www.vitejs.net/guide/api-plugin.html

    
出现 Error: Cannot find module ‘consola‘

因为插件的使用了 consola 包，但是我们没有安装。所以需要安装 consola

$ npm i consola -D

还有就是在2.0版本需要使用的是createStyleImportPlugin不要使用styleImprot了！

import { createStyleImportPlugin, VantResolve } from 'vite-plugin-style-import';
export default defineConfig({
     plugins: [
        vue(),
        createStyleImportPlugin({
          resolves: [VantResolve()],
        }),
  ],
})