vue2 vite antd vue 配置组件按需加载

原创已于 2022-05-04 14:07:07 修改 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-05-04 14:06:44 首次发布

vue 专栏收录该内容

24 篇文章

订阅专栏

这篇博客介绍了如何在Vite环境中安装并配置vite-plugin-importer，以便使用Ant Design Vue库。通过修改vite.config.ts文件，设置libraryName、libraryDirectory和style回调，实现了Ant Design Vue组件样式的自动导入。同时，配置了别名 '@' 指向src目录。

1、安装vite-plugin-importer

2、配置vite.config.ts文件

import { fileURLToPath, URL } from 'url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import usePluginImport from 'vite-plugin-importer'

export default defineConfig({
  plugins: [vue(), vueJsx(),
  usePluginImport({
    libraryName: 'ant-design-vue',
    libraryDirectory: 'es',
      style(name) {
        return `${name}/style/index.css`;
      },
  })],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})