在 Vue 3 的组合式 API (Composition API) 中调用全局挂载的 $fileUrl（通过 app.config.globalProperties 设置），可以通过以下两种方式实现：
方法 1：通过 getCurrentInstance 获取全局属性
import { getCurrentInstance } from 'vue';export default {setup() {// 获取当前组件实例的代理对象const { proxy } = getCurrentInstance();// 调用全局挂载的 $fileUrlconst fileUrl = proxy.$fileUrl;console.log(fileUrl); // 输出: import.meta.env.VITE_BASE_URL_FILE 的值return { fileUrl };}}
注意事项：
getCurrentInstance()仅在setup()或生命周期钩子中可用，且不推荐在异步函数中直接使用（可能返回null）。- TypeScript 用户需要类型断言：
const { proxy } = getCurrentInstance() as { proxy: any };
方法 2：通过依赖注入 (provide/inject)
如果项目复杂，更推荐显式依赖注入来避免隐式耦合。
步骤1：在 main.ts/app.js 中提供全局属性
import { createApp } from 'vue';import App from './App.vue';const app = createApp(App);// 提供全局属性app.provide('$fileUrl', import.meta.env.VITE_BASE_URL_FILE);app.mount('#app');
步骤2：在组件中注入使用
import { inject } from 'vue';export default {setup() {const fileUrl = inject('$fileUrl');console.log(fileUrl); // VITE_BASE_URL_FILE的值return { fileUrl };}}
为什么推荐方法2？
- 类型安全：对 TypeScript 更友好。
- 明确依赖：避免隐式依赖全局属性，便于维护。
- 灵活性：可在不同作用域覆盖注入的值。
补充说明
import.meta.env.VITE_BASE_URL_FILE是 Vite 的环境变量，需以VITE_前缀定义（参考 Vite Env）。.env文件示例：
VITE_BASE_URL_FILE=https://your-file-server.com
如果有其他具体场景需求，可以进一步探讨！
内容由零声教学AI助手提供，问题来源于学员提问
![[GIN-debug] [WARNING] Creating an Engine instance with the Logger and Recovery middleware already attached.](https://linuxcpp.0voice.com/zb_users/upload/2023/05/202305162234452257235.png)
