Vue3 + TS 项目使用 unplugin-auto-import 插件报找不到名称 'ref' 错误解决方案

在 Vue3 中，'ref' 是 Vue Composition API 的一个函数，用于创建一个响应式的引用。在使用 Vue3 和 TypeScript 的项目中，确保已经正确安装了 '@vue/composition-api' 依赖。

首先，确保已经安装了依赖：

npm install @vue/composition-api

然后，在项目的入口文件（一般是'main.ts' 或 'index.ts'）中，导入 '@vue/composition-api' 并进行初始化：

import { createApp } from 'vue';
import { createWebHistory, createRouter } from 'vue-router';
import { createHead } from '@vueuse/head';
import { createPinia } from 'pinia';
import { createApp } from 'vue';
import { createRouter, createWebHashHistory } from 'vue-router';
import { createPinia } from 'pinia';
import App from './App.vue';
import { createI18n } from 'vue-i18n';
import { useMeta } from 'vue-meta';
import { setupI18n } from './i18n';
import { setupRouter } from './router';
import { setupStore } from './store';
import 'virtual:windi.css';
import './styles/index.css';

// 导入 @vue/composition-api
import VueCompositionAPI from '@vue/composition-api';

const app = createApp(App);

const i18n = setupI18n(app);

// 使用 @vue/composition-api
app.use(VueCompositionAPI);

const router = setupRouter(app);
const pinia = createPinia();

app.use(router);
app.use(pinia);
app.use(i18n);

app.mount('#app');

如果你已经正确导入了'@vue/composition-api'，但仍然遇到找不到'ref' 的错误，可能是'unplugin-auto-import' 插件没有正确配置。确保在你的'vite.config.js' 中添加了'unplugin-auto-import' 插件的配置，并且已经设置了'dts' 选项为'true'，以支持 TypeScript 类型的自动导入。

一个示例的'vite.config.js' 配置如下：

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

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        '@vue/composition-api', // 确保已添加 @vue/composition-api
      ],
      dts: true, // 确保已设置 dts 为 true
    }),
  ],
});

确保以上步骤都正确完成后，重新运行你的项目，应该就不再报找不到'ref' 的错误了。