全局配置变量在模板中无法使用的问题

变量在 JavaScript 中可访问，但模板中无法识别。最简单的办法，尽量避免在模板中直接使用。

可能的原因：由于作用域隔离、变量未正确注入或渲染时机问题导致的。

解决办法：正确注册全局变量。

// main.js
const app = createApp(App);
app.config.globalProperties.$config = {
  apiBaseUrl: 'https://api.example.com'
};

// 组件中使用
<template>
  <div>{{ $config.apiBaseUrl }}</div>
</template>

正确注入环境变量。

// .env 文件
VITE_API_URL = 'https://api.example.com'

// 组件中使用
<template>
  <div>{{ import.meta.env.VITE_API_URL }}</div> <!-- 需通过计算属性或 props 传递 -->
</template>

<script setup>
const apiUrl = import.meta.env.VITE_API_URL;
</script>

处理异步加载。