标准答案
- i18n 要设计 locale、messages、fallback、日期货币格式和动态加载策略，页面文案不要散落成硬编码。
- 主题切换通常用 CSS 变量、class 或 data-theme 驱动，组件库主题变量也要和业务主题同步。
- 运行时配置要区分构建时配置、服务端私密配置和客户端可见配置，不要把密钥暴露到前端包里。
- 用户偏好可以持久化 locale、theme、布局密度等轻量设置，但不要把权限、价格、接口结果这类权威数据只存本地。
- SSR 或 Nuxt 场景要注意首屏主题、语言和配置一致性，避免 hydration 前后闪烁或文本不一致。
题目解析
这道题的共同点是“环境状态”。语言、主题、运行时配置如果没有单一来源，很容易出现页面之间不一致。
主题切换不是只改一个颜色变量。组件库变量、图标、图表、代码块和系统深浅色偏好都可能需要配合。
运行时配置最容易出安全问题。凡是发到浏览器的配置都应视为公开信息。
代码示例
下面展示了用 CSS 变量承接主题切换的简化方式。
CSS
:root {
--app-bg: #ffffff;
--app-text: #26323f;
}
[data-theme='dark'] {
--app-bg: #111827;
--app-text: #f9fafb;
}TypeScript
const theme = ref<'light' | 'dark'>('light')
watchEffect(() => {
document.documentElement.dataset.theme = theme.value
})常见误区
- 语言、主题和配置分别在多个组件里读取本地存储，导致初始化顺序混乱。
- 把服务端密钥、内部接口地址或敏感开关放进客户端运行时配置。
- SSR 首屏没有同步语言和主题，页面加载后文本或颜色突然切换。