vite 按需引入

142 阅读1分钟

安装 unplugin-auto-import, unplugin-vue-components

npm install unplugin-vue-components unplugin-vue-components -D

在vite.cofing.ts中配置如下:

plugins: [
AutoImport({
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/ // .md
      ],
      imports: [
        "vue",
        "vue-router",
        // 可额外添加需要 autoImport 的组件
        {
          "@/hooks/useMessage": ["useMessage"],
          "@/hooks/useTable": ["useTable"],
          "@/utils/dict": ["DICT_TYPE"],
          "@/utils/hintConfig": ["HINT_CONFIG"]
        }
      ],
      dts: "./auto-imports.d.ts",
      resolvers: [ElementPlusResolver()],
      eslintrc: {
        enabled: false, // Default `false`
        filepath: "./.eslintrc-auto-import.json", // Default `./.eslintrc-auto-import.json`
        globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
      }
    }),
    Components({
      // 要搜索组件的目录的相对路径
      dirs: ["src/components"],
      // 组件的有效文件扩展名
      extensions: ["vue", "md"],
      // 搜索子目录
      deep: true,
      include: [/\.vue$/, /\.vue\?vue/],
      // 生成自定义 `auto-components.d.ts` 全局声明
      dts: "./auto-components.d.ts",
      // 自定义组件的解析器
      resolvers: [ElementPlusResolver()],
      exclude: [/[\\/]node_modules[\\/]/]
    }),
]

版权声明:本文为CSDN博主「zy_080400」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:blog.csdn.net/zy_080400/a…