自动引入插件unplugin-auto-import，以vite为例

### 配置 `unplugin-auto-import` 在 Vite 中的用法 为了在 Vite 项目中使用 `unplugin-auto-import` 插件，可以按照以下方法进行配置。此插件的主要功能是从指定模块自动导入 API 或函数到全局范围，从而减少手动引入的工作量。 #### 安装依赖项 首先，在终端执行以下命令安装必要的包： ```bash npm install unplugin-auto-import --save-dev ``` 或者如果使用的是 Yarn，则运行： ```bash yarn add unplugin-auto-import --dev ``` #### 修改 `vite.config.ts` 接着，在项目的根目录下找到或创建 `vite.config.ts` 文件，并将其更新为支持 `unplugin-auto-import` 的配置。以下是完整的配置示例[^1]： ```typescript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import AutoImport from 'unplugin-auto-import/vite'; export default defineConfig({ plugins: [ vue(), AutoImport({ imports: ['vue'], // 自动导入 Vue 提供的相关函数 dts: './auto-imports.d.ts' // 自动生成声明文件路径 }) ], build: { target: 'esnext', outDir: 'dist' } }); ``` 上述代码片段通过 `AutoImport()` 方法指定了需要自动导入的内容以及生成对应的 TypeScript 声明文件的位置。 #### 关于 ESM 和 CJS 兼容性问题 当涉及到 CommonJS 模块时，可能会遇到无法正确识别默认导出的情况。此时可以通过调整 tsconfig.json 设置来解决兼容性问题。具体来说，将 `compilerOptions.esModuleInterop` 设定为 `true` 可以帮助处理此类情况[^2]。例如： ```json { "compilerOptions": { "esModuleInterop": true, ... } } ``` 这样做的目的是让 TypeScript 编译器能够更好地桥接 ES Modules 和 CommonJS 模块之间的差异。 #### 测试效果 完成以上步骤后重新启动开发服务器并尝试访问组件中的某些常用 Vue 函数（如 `ref`, `reactive`），无需显式地从 `'vue'` 导入它们即可正常使用。 --- ###