vue3 + ts 中自动引入API配置

1、自动引入reactive、onMounted 等 API

在实际开发中每个组件都会使用到reactive、onMounted 等 API，如何做到可以自动引入而不要每次都import，这样就可以省时省力。

✅ 在 vite.config.js 中使用 unplugin-auto-import（推荐）

这是目前最主流、最干净、最优雅的方式

🔧 安装依赖

npm i -D unplugin-auto-import

⚙️ 在 vite.config.js 中配置

import AutoImport from 'unplugin-auto-import/vite'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],
      // 生成自动导入的声明文件，方便 TS 智能提示
      dts: 'src/auto-imports.d.ts',
      // 可选：控制哪些文件自动导入（默认是所有 .vue、.ts、.js）
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/, /\.vue\?vue/, // .vue
      ],
    })
  ]
})

⚙️ 确认 tsconfig.json 能看到这个声明文件

{
  "compilerOptions": {
    "types": [],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.vue",
    "src/*.d.ts" // ✅ 加上这一行！
  ]
}

⚙️ 运行项目，自动生成

运行一次项目：

npm run dev

之后在 src/ 目录下会自动生成：

src/
 ├─ auto-imports.d.ts ✅
 ├─ main.ts
 ├─ App.vue

内容大概是这样的：

// Generated by 'unplugin-auto-import'
declare global {
  const reactive: typeof import('vue')['reactive']
  const onMounted: typeof import('vue')['onMounted']
  const ref: typeof import('vue')['ref']
}
export {}

2、自动导入store的全部状态

✅ vite.config.js 中使用 unplugin-auto-import（推荐）

AutoImport({
  imports: ['vue', 'vue-router', 'pinia'],
  dirs: ['src/store'], // ✅ 自动导入 store
  dts: 'src/auto-imports.d.ts'
})

• 注意：store需要对应项目中的存放公共状态的文件夹名称

这样你就可以在任何地方 直接使用 store，不用手动 import：

<script setup lang="ts">
const userStore = useUserStore()

userStore.setName('李四')
console.log(userStore.name)
</script>

✅ 无需写

import { useUserStore } from '@/store/user'

为什么能识别 useUserStore

因为 unplugin-auto-import 会自动扫描你配置的目录（如 src/store），
把所有导出的函数（如 useUserStore）都注册为全局可用函数。

生成的 auto-imports.d.ts 中会有类似声明：

declare global {
  const useUserStore: typeof import('./stores/user')['useUserStore']
}

3、额外知识点

项目代码兼容低版本以及IE等浏览器

在实际开发中有时候会使用一些比较新的语法，但是有时候这些语法在低版本浏览器上不支持。这时候如何可以低成本快速的兼容，可以使用如何配置。

✅ vite.config.js 中使用 ‘@vitejs/plugin-legacy’

在 vite.config.ts 中：

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

export default defineConfig({
  plugins: [
    vue(),
    legacy({
      targets: ['defaults', 'IE 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // 处理 async/await
    }),
  ],
})

⚙️ @vitejs/plugin-legacy 插件的作用

这个插件会在构建时：

1、自动生成一份现代版代码（ESM）；
2、再生成一份旧版代码（ES5）；
3、并在 HTML 中自动插入条件加载逻辑

<script type="module" src="/assets/index.es.js"></script>
<script nomodule src="/assets/index-legacy.js"></script>

现代浏览器加载第一个，IE 加载第二个。
从而实现兼容旧浏览器但不拖慢新浏览器性能 ✨

🔍 参数说明

legacy({
  targets: ['defaults', 'IE 11']
})

这其实就是Babel 的浏览器目标配置，告诉插件要兼容哪些浏览器：

参数	含义
'defaults'	兼容默认浏览器集合（一般是 >0.5% 市占率 且 最新的浏览器）
'IE 11'	额外添加对 IE11 的兼容支持

你也可以换成更精确的写法：

targets: ['> 0.5%', 'last 2 versions', 'IE 11']