webpack 本身不支持自动导入 api，但可通过 unplugin-auto-import 插件实现：安装后在 webpack.config.js 中配置 imports、dirs、dts 和 eslintrc，配合 tsconfig.json 正确设置 types 和 include，即可在 .ts/.vue 文件中免 import 使用 ref、useroute 等。
Webpack 本身不支持自动导入 API，但可以通过插件 unplugin-auto-import 实现。它能在编译时扫描代码中使用的标识符（比如 ref、computed、useRoute），自动注入对应的 import 语句，彻底告别手动引入。
安装与基础配置
在 Webpack 项目中使用该插件，需先安装：
npm install -D unplugin-auto-import- 确保已配置
ts-loader或babel-loader支持 TypeScript
然后在 webpack.config.js（或 webpack.config.ts）中注册插件：
const AutoImport = require('unplugin-auto-import/webpack');
module.exports = {
// ...其他配置
plugins: [
AutoImport({
imports: ['vue', 'vue-router', '@vueuse/core'],
dirs: ['./src/composables', './src/utils'],
dts: './src/auto-imports.d.ts',
eslintrc: {
enabled: true,
filepath: './.eslintrc-auto-import.json'
}
})
]
};
关键配置项说明
-
imports：指定要自动导入的库，内置预设支持vue（含 Composition API）、vue-router、pinia、@vueuse/core等 -
dirs：声明自定义函数目录，插件会自动扫描并导入其中的命名导出（如useApi、formatDate） -
dts：生成类型声明文件，让 TypeScript 编辑器识别自动导入的变量，避免类型报错 -
eslintrc：生成 ESLint 全局变量配置，防止'ref' is not defined类警告
配合 TypeScript 的注意事项
为确保类型推导准确，需确认 tsconfig.json 中启用了以下选项：
-
"types": ["unplugin-auto-import/types"]—— 将自动生成的类型纳入全局作用域 -
"include"包含auto-imports.d.ts文件路径（如["src/**/*", "src/auto-imports.d.ts"]） - 若使用
ts-loader，建议关闭其类型检查（交由tsc --noEmit单独执行），避免重复校验
验证是否生效
配置完成后，重启 Webpack 开发服务，在任意 .ts 或 .vue（<script setup></script>）文件中直接使用：
const count = ref(0);
const route = useRoute();
const { loading, execute } = useAsyncData(...);
无需 import 语句，编辑器无报错、TS 类型正常、运行时功能完整，即表示配置成功。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
