Vite 相关配置 | 白嘴鸽的个人网站

Vite 配置别名 alias

首先，当开发环境是 TypeScript 时，要使用 Node 中的 path 模块，需要先安装 Node 的类型声明文件

1	npm i -D @types/node

然后，在 vite.config.ts 中添加如下配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '@components': resolve(__dirname, 'src/components')
    }
  }
})

修改 tsconfig.json 文件，防止 ts 报错不识别

{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    },
  },
}

最后，如果 ts 不识别 VUE 文件，大概是缺少类型声明，可以在 env.d.ts 中加入，确保该文件被 ts 配置引入

declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent<object, object, object>
  export default component
}

Vite 配置 Vue3 API 自动引入

首先安装 unplugin-auto-import 插件

1	npm i -D unplugin-auto-import

然后，在 vite.config.ts 中添加如下配置

// 项目用的vite则引入vite文件，webpack 则引入webpack
import AutoImport from "unplugin-auto-import/vite"

export default defineConfig({
  plugins: [
    // 插件配置
    AutoImport({
      // auto-import内置vue、vue-router、pinia、react这些常见基本库的引入规则
      imports: ["vue", "vue-router"],
      // 配置文件生成路径
      dts: 'src/types/auto-imports.d.ts',
    })
  ],
  
})

Vite 配置 Element Plus 组件及 Icon 自动引入

首先安装 unplugin-vue-components、 unplugin-auto-import 和 unplugin-icons 插件

1	npm i -D unplugin-vue-components unplugin-auto-import unplugin-icons

然后，在 vite.config.ts 中添加如下配置

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import AutoImport from "unplugin-auto-import/vite"
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

export default defineConfig({
  plugins: [
    // 插件配置
    Components({
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          prefix: 'icon', // 可为空
          enabledCollections: ['ep'], // 指定为 Element plus 图标集 ep
        })]
    }),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Icons({
      autoInstall: true,
    })
  ]
})

icon 的使用方法

<el-icon>
    <icon-ep-aim />
</el-icon>
<!-- 或 -->
<icon-ep-aim />