在vue中重复组件导入简化方案

重复组件导入简化

在 Vue 3 项目中，如果你发现每个组件都要重复导入 api 和 utils，是可以通过几种方式简化甚至完全避免这些重复导入的。下面是常用的几种简化方案：

✅ 方案一：使用 app.config.globalProperties 注入全局属性

这是最常见的做法，可以在 main.ts 或 main.js 中将 api 和 utils 挂载到 app.config.globalProperties 上，使其在所有组件中通过 this.$api和this.$utils 直接访问（仅限于 Options API）。

示例：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import api from '@/api'
import utils from '@/utils'const app = createApp(App)app.config.globalProperties.$api = api
app.config.globalProperties.$utils = utilsapp.mount('#app')

使用（Options API 中）：

<script>
export default {mounted() {this.$api.getData()const formatted = this.$utils.formatDate(new Date())}
}
</script>

✅ 方案二：使用 Vue 插件封装并自动注入

你可以把 api 和 utils 封装成一个插件，一次性注册。

plugins/global-inject.ts：

export default {install(app) {app.config.globalProperties.$api = require('@/api').defaultapp.config.globalProperties.$utils = require('@/utils').default}
}

在 main.ts 中使用

import globalInject from './plugins/global-inject'
app.use(globalInject)

✅ 方案三：使用 Vite / Webpack 的路径别名 + 全局 Auto Import（组合式 API 推荐）

如果你使用的是 组合式 API（setup），this.$api 是不可用的，但你可以使用自动导入（借助插件）

配置 unplugin-auto-import

使用 Vite 项目的话，可以借助unplugin-auto-import：

import AutoImport from 'unplugin-auto-import/vite'export default defineConfig({plugins: [AutoImport({imports: [// 自动导入 Vue 相关 API'vue',{'@/api': [['default', 'api']],'@/utils': [['default', 'utils']],}],dts: 'src/auto-imports.d.ts',})]
})

使用（setup 中无须导入）：

setup() {api.getUser()const formatted = utils.formatDate(new Date())
}

✅ 方案四：封装 Composition API 方法

如果 api 和utils 有非常常用的方法，也可以封装成组合式函数，如

// composables/useApi.ts
import api from '@/api'
export function useApi() {return api
}// composables/useUtils.ts
import utils from '@/utils'
export function useUtils() {return utils
}

然后在组件里：

import { useApi, useUtils } from '@/composables'setup() {const api = useApi()const utils = useUtils()api.getData()
}

✅ 总结

方法	优点	使用场景	支持 Options API	支持 Setup API
app.config.globalProperties	简单、常用	Options API 项目	✅	❌
插件注入	模块化清晰	中大型项目	✅	❌
自动导入插件	零导入体验	现代组合式项目（Vite）	❌	✅
封装 composables	更符合组合式风格	通用	✅（手动引入）	✅