在 Vue 3 中,Vue.prototype 已被移除,不能再直接向 Vue 的原型上添加全局属性或方法。取而代之的方式是使用 app.config.globalProperties 进行全局属性的挂载。
替代方式
如果你想在 Vue 3 中实现类似 Vue.prototype.$project = base.getProjectName() 的功能,可以这样做:
import { createApp } from 'vue';
import App from './App.vue';
import base from './base'; // 假设 base 里有 getProjectName 方法const app = createApp(App);// Vue 2 写法:Vue.prototype.$project = base.getProjectName()
// Vue 3 写法:
app.config.globalProperties.$project = base.getProjectName();app.mount('#app');
在组件中使用
在 Vue 组件中,你可以通过 this.$project 访问该全局属性:
<script setup>
import { getCurrentInstance } from 'vue';const instance = getCurrentInstance();
console.log(instance.appContext.config.globalProperties.$project);
</script>
或者在 Options API 里直接使用:
<script>
export default {mounted() {console.log(this.$project); // 访问全局属性}
}
</script>
更推荐的做法
虽然 app.config.globalProperties 提供了类似 Vue.prototype 的功能,但在 Vue 3 中,官方更推荐使用 依赖注入(Provide/Inject) 或 Pinia(Vuex 替代方案) 来管理全局状态,尤其是复杂的项目。
如果是简单的全局配置,可以使用 provide/inject:
// main.js
app.provide('projectName', base.getProjectName());
然后在组件中使用:
<script setup>
import { inject } from 'vue';const projectName = inject('projectName');
console.log(projectName);
</script>
这样会更加符合 Vue 3 的最佳实践。