vite 按需引入

最新推荐文章于 2024-05-10 12:35:45 发布

zy_ij

最新推荐文章于 2024-05-10 12:35:45 发布

阅读量403

点赞数

分类专栏： vite按需引入文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/zy_080400/article/details/130869264

版权

vite按需引入专栏收录该内容

1 篇文章 0 订阅

订阅专栏

安装 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[\\/]/]
    }),
]