Vue3+TypeScript项目中配置自动导入功能，遇到了问题需要详细的配置教程！

文章目录

概要

如何同时配置unplugin-auto-import和unplugin-vue-components，还包含了Element Plus解析器的使用。提供了详细的TypeScript配置说明，强调了在tsconfig.json中包含自动生成的类型声明文件的重要性。对配置选项的解释比较全面，特别是dts和eslintrc这些关键参数。

技术名词解释

vue3
TypeScript
vite
unplugin-auto-import
unplugin-vue-components

配置流程

1. 安装必要插件

首先安装 unplugin-auto-import 和 unplugin-vue-components

npm install -D unplugin-auto-import unplugin-vue-components

2. 配置 Vite

在 vite.config.ts 中配置自动导入：

javascript 复制代码

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { resolve } from "path";

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      iconDirs: [resolve(__dirname, "src/assets/icons")],
      symbolId: "icon-[name]",
    }),
    AutoImport({
      imports: ["vue", "vue-router", "pinia"],
      dts: "./auto-imports.d.ts",
      eslintrc: {
        enabled: true,
        filepath: "./.eslintrc-auto-import.json",
      },
    }),
    Components({
      // 自动导入 src/components 目录下的Vue组件
      dts: "components.d.ts",
      // 可选：如果您使用了类似 Element Plus 的UI库，可以配置解析器
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },
});

3. 配置 TypeScript

在 tsconfig.json 中包含自动生成的类型声明文件：

javascript 复制代码

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "types": [
      "vite-plugin-svg-icons/client"
    ],
    "baseUrl": "./", // 设置解析非相对模块的基准目录
    "paths": { // 设置路径映射
      "@/*": [
        "src/*"
      ] // 表示 @/ 对应 src/ 目录下的所有文件
    }
  },
}

在 tsconfig.app.json 中包含自动生成的类型声明文件：

javascript 复制代码

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "types": [
      "vite/client"
    ],
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,
    // 确保有 baseUrl 和 paths
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "auto-imports.d.ts", // 自动导入
    "components.d.ts", // 自动导入
  ]
}

4.重启并验证

完成配置后，重启开发服务器：

npm run dev

现在可以在 Vue 组件中直接使用 API，无需手动导入：

javascript 复制代码

<script lang='ts' setup>
interface Form {
  username: string;
  password: string;
  code: string;
}
// 响应式变量
const loginForm = reactive<Form>({
  username: '',
  password: '',
  code: '',
})
const captchaEnabled = ref<boolean>(true);
const codeUrl = ref<string>('');
const rememberMe = ref<boolean>(false);
const loading = ref<boolean>(false);

const onSubmit = () => {
  console.log('submit!')
  loading.value = true;
  // 模拟登录过程
  setTimeout(() => {
    loading.value = false;
  }, 2000);
}

// 获取验证码
const getCode = () => {
  console.log('获取验证码')
}
// 获取验证码开关
const handleLogin = () => {
  console.log('获取验证码开关')
}

</script>

注意⚠️：如果还是出现语法报错！项目能启动，功能没有问题，先去检查配置，这些都没有问题，一定是vscode 插件问题！

Volar插件与Vue3+TS项目冲突，卸载后页面不提示语法错误。这通常是因为Volar和Vetur共存，或者Volar版本与项目TypeScript版本不兼容导致的。我们不建议卸载Volar，因为它是Vue3官方推荐的VSCode扩展。下面提供解决方案：

确保已禁用或卸载Vetur。
重启vs code
重启项目

小结

⚠️ 常见问题排查

TypeScript 报错 "Cannot find name"
- 确认 auto-imports.d.ts 已生成并包含在 tsconfig.json 的 include 中
- 重启 TypeScript 服务器：在 VSCode 中执行 "TypeScript: Restart TS Server"
自动导入不生效
- 确认已重启开发服务器
- 检查 auto-imports.d.ts 文件是否正常生成
- 验证 Vite 配置路径是否正确
ESLint 报错未定义
- 确认已正确配置 .eslintrc-auto-import.json
- 检查 ESLint 配置是否继承自动导入规则

💡 最佳实践

首次配置时将 eslintrc.enabled 设为 true 生成配置，之后改为 false 避免重复生成
定期检查自动生成的类型文件，确保导入正确
对于团队项目，将生成的 .d.ts 和 ESLint 配置文件纳入版本控制

按照以上步骤配置后，您的 Vue3 + TypeScript 项目就能实现完整的自动导入功能，大幅提升开发体验。