使用vite-plugin-style-import插件报错Cannot find module ‘consola‘和解决方法

使用的 Vite创建的项目，使用 unplugin-vue-components 来进行按需加载。但是此插件无法处理非组件模块，如 message，这种组件需要手动加载，如：

import { message } from 'ant-design-vue'
import 'ant-design-vue/es/message/style/css'

由于已按需导入了组件库，因此仅样式不是按需导入的，因此只需按需导入样式即可。

使用 vite-plugin-style-import 可以帮助我们按需引入样式

安装：

npm i vite-plugin-style-import -D
// 或者
yarn add vite-plugin-style-import -D

使用：

在vite.config.ts 中的配置插件：

import {
  createStyleImportPlugin,
  AndDesignVueResolve,
  VantResolve,
  ElementPlusResolve,
  NutuiResolve,
  AntdResolve,
} from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    // ......
    createStyleImportPlugin({
      resolves: [AndDesignVueResolve()],
      // 如果没有你需要的resolve，可以在lib内直接写
      libs: [
        {
          libraryName: 'ant-design-vue',
          esModule: true,
          resolveStyle: name => {
            return `ant-design-vue/es/${name}/style/index`
          },
        },
      ],
    }),
  ],
  // 1. 如果使用的是ant-design 系列的 需要配置这个
  // 2. 确保less安装在依赖 `yarn add less -D`
  css: {
     preprocessorOptions: {
       less: {
         javascriptEnabled: true,
       },
     },
  },
})

安装配置完，启动项目后会报错：

 解决方法：

安装 ：consola

npm i consola -D

安装完毕，重新运行即可