vue3中globalProperties注册一个全局变量，在模板中可以直接使用

全局变量

开发中我们常常为了灵活有一些静态的配置，直接放在window对象中，比如我习惯这么做：

window.setting = {
        app_id: 10
}
<script src="libs/app-config.js">

app-config.js ：
window.appconfig = (function getAppConfig(appid) {
    let config = {};
    switch (appid) {
        case 10:
            config.title_small = '配图一键生成，助您高效设计';
            config.title = '信网智绘';
            config.logo = 'libs/logo.svg';
            config.logo_text = 'libs/logo-text.svg';
            break;
        default:
            config.title_small = '暂无';
            config.title = '暂无';
    }

    document.title = config.title;

    return config;
})(window.setting.app_id);

这种方式正常在组件中使用比较繁琐：

<h1>{{ appconfig.title }}</h1>
data() {
    return {
        appconfig: window.appconfig
    }
}

要先注册才能用，所以我们可以直接在全局环境中，对这种静态，初始化后就不会变的配置进行全局化处理，注册全局变量，让所有组件无需单独定义就能在模板中直接使用。

利用app.config.globalProperties注册

Vue3 提供了globalProperties配置，可以将变量挂载到全局，所有组件实例都能访问到。

在入口文件（main.js）中，创建 app 实例后挂载全局变量：

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);

// 挂载全局变量（假设 window.appconfig 已存在）
app.config.globalProperties.$appconfig = window.appconfig;

app.use(store).mount('#app');

模板中：直接通过$appconfig访问（注意加$前缀，避免和组件内变量冲突）

<template>
  <div>{{ $appconfig.title }}</div>
</template>

脚本中：如果需要在<script>里访问，需通过getCurrentInstance获取组件实例：

<script setup> 
// 组合API中
import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
console.log(instance.appContext.config.globalProperties.$appconfig)
</script>