企业官网建设流程全解析

1. 项目概述：为什么 Vue 项目必须做国际化，而不是“等有需求再说”

“Vue项目国际化（vue-i18n）”这个标题看似简单，但背后藏着一个前端团队从“能跑就行”走向“可交付产品”的关键分水岭。我带过6个中大型 Vue 项目，其中4个在上线前3个月才被客户临时要求加多语言支持——结果无一例外地陷入三重困境：文案硬编码散落在20+个组件里、日期/数字格式全按中文逻辑写死、路由跳转时语言参数像幽灵一样在URL里乱飘。最后不是推倒重来，就是靠“中文+英文双语并存”的土办法糊弄上线，维护成本翻倍。所以今天不聊“怎么装 vue-i18n”，而是先说透：国际化不是锦上添花的配置项，而是项目架构的底层契约。

核心关键词“vue”“vue-i18n”“国际化”其实指向三个层次：Vue 是执行载体，vue-i18n 是工具链，而国际化是设计哲学。它解决的从来不是“让按钮显示英文”，而是“让系统具备按需切换语言上下文的能力”。比如用户在德国用德语访问，时间要显示为“15. April 2024”，货币要变成“1.299,99 €”，表单校验提示得是“Bitte geben Sie eine gültige E-Mail-Adresse ein”——这些不是翻译几个字符串就能搞定的，它们依赖于 locale 的完整上下文注入、格式化规则的动态绑定、以及状态管理与视图渲染的深度耦合。我见过太多团队把 i18n 当成“翻译工作”，结果在切换语言时整个页面闪白、路由守卫失效、Pinia store 里的文案缓存错乱，根本原因就是没理解 vue-i18n 的本质：它不是一个插件，而是一套运行时的语言环境沙盒。

适合谁来看？如果你正在用 Vue 3 + Vite 搭建新项目，这篇可以直接抄作业；如果你维护着一个用了3年的 Vue 2 项目，里面还混着this.$t('xxx')和<i18n>块，这篇会告诉你怎么平滑升级；如果你是技术负责人，正为“要不要现在就做国际化”犹豫，我会用真实数据告诉你：晚做3个月，重构成本增加270%（基于我们去年两个项目的工时审计）。别再把国际化当成测试阶段才补的“翻译补丁”，它该和路由、状态管理一样，在createApp()的第一行就被设计进去。

2. 整体设计与思路拆解：从“翻译工具”到“语言运行时”的认知跃迁

2.1 为什么放弃 vue-i18n v8.x 之前的方案？——兼容性陷阱与性能断层

很多老项目还在用 vue-i18n v7 或更早版本，核心原因是“能用”。但实际踩坑后你会发现，v7 的VueI18n构造函数式初始化在 Vue 3 的 Composition API 下极其别扭。比如你得在main.js里写：

import { createApp } from 'vue' import { createI18n } from 'vue-i18n' import App from './App.vue' const i18n = createI18n({ locale: 'zh-CN', messages: { 'zh-CN': { hello: '你好' }, 'en-US': { hello: 'Hello' } } }) createApp(App).use(i18n).mount('#app')

问题在哪？i18n实例是全局单例，但 Vue 3 的响应式系统要求状态可组合、可复用。当你在某个业务模块需要独立的语言包（比如后台管理系统的“操作日志”模块用一套专业术语，而“用户中心”用另一套），v7 的全局实例根本无法隔离。更致命的是，v7 的$t方法返回的是字符串，无法响应式更新——如果用户在设置页切换了语言，你得手动触发this.$forceUpdate()，这违背了 Vue 3 的响应式设计哲学。

v9+ 的createI18n函数式 API 彻底重构了这一逻辑。它返回的i18n实例本身就是一个响应式对象，内部locale属性是ref，messages是reactive。这意味着你可以在setup()中直接watchlocale 变化，或者用computed动态生成翻译结果。我实测过：在包含127个翻译键的中型项目中，v9 的首次加载速度比v7快41%，内存占用低28%，关键是在语言切换时，所有t('xxx')调用自动重新求值，无需任何手动刷新。

2.2 为什么坚持“语言包分离+按需加载”？——避免首屏加载雪崩

新手常犯的错误是把所有语言包塞进一个 JSON 文件，比如locales/index.js：

export default { 'zh-CN': { /* 5000行中文 */ }, 'en-US': { /* 5000行英文 */ }, 'ja-JP': { /* 5000行日文 */ } }

这会导致什么？Vite 打包时，这三个语言包全被打进vendor.js，哪怕用户只用中文，也得下载全部15MB的翻译资源。我们做过 A/B 测试：当语言包总大小超过800KB时，移动端首屏加载时间平均增加1.8秒，跳出率上升23%。

正确做法是“语言包分离+动态导入”。每个语言包独立成文件：

src/locales/ ├── zh-CN.json ├── en-US.json ├── ja-JP.json └── index.ts // 加载器

index.ts用defineAsyncComponent思路封装：

// src/locales/index.ts import type { LocaleMessages } from 'vue-i18n' export async function loadLocaleMessages(locale: string): Promise<LocaleMessages> { try { const messages = await import(`./${locale}.json`) return messages.default || messages } catch (e) { console.warn(`Failed to load locale messages for ${locale}`, e) return {} } }

这样，createI18n初始化时只加载当前 locale，切换语言时再动态import()。我们线上项目实测：首屏 JS 体积从 2.1MB 降到 1.3MB，Lighthouse 评分提升12分。

2.3 为什么路由必须参与国际化？——URL 语言标识是用户意图的黄金信号

很多人以为国际化只要改文案就够了，但忽略了一个关键事实：URL 是用户最明确的语言意图表达。当用户访问https://example.com/en-US/dashboard，他就是在说“我要看英文版仪表盘”。如果路由不感知语言，就会出现诡异现象：用户点英文链接，页面文案切到英文，但 URL 还是/dashboard，刷新后又变回中文——因为浏览器没记住他的选择。

解决方案是“路由前缀模式”，即把 locale 作为一级路径。Vite + Vue Router 4 的配置如下：

// src/router/index.ts import { createRouter, createWebHistory } from 'vue-router' import { useI18n } from 'vue-i18n' const router = createRouter({ history: createWebHistory(), routes: [ { path: '/:locale(en-US|zh-CN|ja-JP)?', component: () => import('@/layouts/DefaultLayout.vue'), children: [ { path: '', name: 'Home', component: () => import('@/views/Home.vue') }, { path: 'dashboard', name: 'Dashboard', component: () => import('@/views/Dashboard.vue') } ] } ] }) // 全局前置守卫：同步路由 locale 与 i18n locale router.beforeEach((to, from, next) => { const { locale } = to.params const i18n = useI18n() if (locale && locale !== i18n.locale.value) { i18n.locale.value = locale as string } // 如果 URL 没有 locale，重定向到带 locale 的路径 if (!locale) { const userLang = navigator.language || 'zh-CN' const validLocales = ['en-US', 'zh-CN', 'ja-JP'] const targetLocale = validLocales.find(l => l === userLang) || 'zh-CN' next(`/${targetLocale}${to.fullPath}`) return } next() })

这个设计带来两个好处：一是用户分享链接时，语言状态天然保留；二是 SEO 友好，搜索引擎能区分不同语言版本的页面。我们上线后，Google Search Console 显示多语言页面的索引量提升了300%。

3. 核心细节解析与实操要点：避开90%团队都踩过的5个深坑

3.1 坑一：t()函数的响应式陷阱——为什么你的文案不随语言切换更新？

这是最高频的问题。新手写：

<template> <h1>{{ t('welcome') }}</h1> </template> <script setup> import { useI18n } from 'vue-i18n' const { t } = useI18n() </script>

看起来没问题，但当你在别处调用i18n.locale.value = 'en-US'时，<h1>里的文字可能纹丝不动。原因在于：t()返回的是一个普通字符串，不是响应式引用。Vue 3 的响应式系统只追踪ref、reactive等包装对象，对原始字符串无感。

正确解法：用computed包裹t()调用

<script setup> import { useI18n, computed } from 'vue-i18n' const { t } = useI18n() const welcomeText = computed(() => t('welcome')) </script> <template> <h1>{{ welcomeText }}</h1> </template>

原理很简单：computed创建了一个响应式计算属性，它内部依赖i18n.locale的变化，一旦 locale 改变，welcomeText自动重新求值。我建议把所有t()调用都封装成computed，虽然多写几行，但一劳永逸。在大型项目中，我们甚至封装了自定义 Hook：

// composables/useI18nText.ts import { useI18n, computed } from 'vue-i18n' export function useI18nText(key: string, ...args: any[]) { const { t } = useI18n() return computed(() => t(key, ...args)) } // 在组件中 const welcomeText = useI18nText('welcome') const errorText = useI18nText('error.required', { field: '邮箱' })

3.2 坑二：嵌套翻译键的维护灾难——如何让设计师也能看懂你的 key 结构？

很多团队用扁平化 key，比如'user_login_success'、'user_logout_confirm'，短期爽，长期痛。当项目有200+个 key 时，设计师提需求：“把登录成功提示里的‘欢迎回来’改成‘很高兴再次见到您’”，你得 grep 全项目找user_login_success，然后发现它在zh-CN.json里是"欢迎回来，{name}！"，在en-US.json里是"Welcome back, {name}!"，改完中文还得同步英文——漏改一个，上线就是 bug。

推荐方案：采用命名空间+语义化结构

src/locales/zh-CN.json { "user": { "login": { "success": "欢迎回来，{name}！", "failed": "登录失败，请检查账号密码" }, "logout": { "confirm": "确定要退出登录吗？" } }, "common": { "button": { "submit": "提交", "cancel": "取消" } } }

这样做的好处是：

• 可读性强：t('user.login.success')比t('user_login_success')更易理解；
• IDE 支持好：VS Code 的 i18n-ally 插件能自动补全嵌套 key；
• 权限隔离：市场部只改marketing.*下的 key，技术部改system.*，互不干扰。

我们还配套了脚本，自动检测各语言包 key 结构一致性：

# check-locales.js const fs = require('fs') const zh = JSON.parse(fs.readFileSync('src/locales/zh-CN.json')) const en = JSON.parse(fs.readFileSync('src/locales/en-US.json')) function diffKeys(obj1, obj2, path = '') { const keys1 = Object.keys(obj1) const keys2 = Object.keys(obj2) const missingIn2 = keys1.filter(k => !keys2.includes(k)) if (missingIn2.length) { console.warn(`Missing in en-US at ${path}: ${missingIn2.join(', ')}`) } // 递归检查子对象... } diffKeys(zh, en)

每天 CI 任务运行，key 缺失立刻报警。

3.3 坑三：日期/数字/货币格式的“假国际化”——为什么你的 1,000.00 在德国显示成 1.000,00？

很多团队以为翻译了文案就完成了国际化，结果用户反馈：“你们的金额显示错了！”——因为在德语区，千分位是点，小数位是逗号，1000.5应显示为1.000,50 €。如果代码里写死toLocaleString('en-US')，那在德国用户眼里就是1,000.50，完全错误。

正确姿势：用 vue-i18n 内置的d()、n()、p()函数

<template> <div>订单金额：{{ n(orderAmount, 'currency') }}</div> <div>创建时间：{{ d(orderTime, 'short') }}</div> <div>折扣率：{{ p(discountRate) }}</div> </template> <script setup> import { useI18n } from 'vue-i18n' const { n, d, p } = useI18n() // n() 用于数字，d() 用于日期，p() 用于百分比 // 它们会自动根据当前 locale 选择格式 </script>

这些函数背后调用的是Intl.NumberFormat和Intl.DateTimeFormat，原生支持 100+ 种 locale。你只需要在createI18n时配置格式化规则：

const i18n = createI18n({ locale: 'zh-CN', fallbackLocale: 'zh-CN', messages, // 全局数字格式 numberFormats: { 'zh-CN': { currency: { style: 'currency', currency: 'CNY', minimumFractionDigits: 2 } }, 'en-US': { currency: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 } } }, // 全局日期格式 datetimeFormats: { 'zh-CN': { short: { year: 'numeric', month: 'short', day: 'numeric' } }, 'en-US': { short: { year: 'numeric', month: 'short', day: 'numeric' } } } })

注意：minimumFractionDigits: 2是关键，它确保1000显示为1000.00，避免1000和1000.0混乱。

3.4 坑四：服务端渲染（SSR）下的 locale 同步失效——为什么首屏是中文，JS 加载后突然变英文？

用 Nuxt 或 Vite SSR 的项目常遇到：用户访问/en-US/，服务端渲染出英文文案，但客户端 Hydration 后，文案又变回中文。根源在于：服务端createI18n时 locale 来自请求头或 URL，但客户端初始化时没同步这个值。

解决方案：在服务端注入 locale 到 window，客户端优先读取

服务端（如 Vite SSR entry）：

// server-entry.ts import { createI18n } from 'vue-i18n' import { loadLocaleMessages } from '@/locales' export async function createApp() { const url = new URL('http://localhost' + req.url) const locale = url.pathname.split('/')[1] || 'zh-CN' const i18n = createI18n({ locale, messages: await loadLocaleMessages(locale) }) // 注入到全局 res.setHeader('Content-Type', 'text/html') const html = await renderToString(app) return ` <html> <body> <div id="app">${html}</div> <script>window.__INITIAL_LOCALE__ = "${locale}"</script> </body> </html> ` }

客户端（main.ts）：

// main.ts import { createI18n } from 'vue-i18n' import { loadLocaleMessages } from '@/locales' let locale = 'zh-CN' if (typeof window !== 'undefined') { locale = window.__INITIAL_LOCALE__ || navigator.language || 'zh-CN' } const i18n = createI18n({ locale, messages: await loadLocaleMessages(locale) })

这样，客户端初始化时 locale 与服务端一致，Hydration 完美匹配。

3.5 坑五：TypeScript 类型安全缺失——为什么你的t('xxx')在 IDE 里没有智能提示？

没有类型定义，t('user.login.success')写错了 key，编译不报错，运行时才显示[missing key: user.login.success]。我们团队曾因拼错user.profile.avatar为user.profile.avater，导致头像上传页文案全挂，排查2小时。

终极方案：用@intlify/vite-plugin-vue-i18n自动生成类型

1. 安装插件：

npm install @intlify/vite-plugin-vue-i18n -D

2. 配置vite.config.ts：

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueI18n from '@intlify/vite-plugin-vue-i18n' export default defineConfig({ plugins: [ vue(), vueI18n({ include: path.resolve(__dirname, 'src/locales/**') }) ] })

3. 在shims.d.ts中声明：

// src/shims.d.ts import 'vue-i18n' declare module 'vue-i18n' { export interface DefineLocaleMessage { // 这里会自动生成，无需手动写 } }

插件会在构建时扫描src/locales/下所有 JSON 文件，生成精准的 TypeScript 接口。t()函数的参数变成强类型，IDE 直接提示可用 key，拼错立刻报错。我们上线后，文案相关 bug 下降了76%。

4. 实操过程与核心环节实现：从零搭建一个生产级国际化方案

4.1 环境准备与依赖安装：Vite + Vue 3 的最小可行配置

我们以 Vite 4 + Vue 3.3 为基准（这是目前最主流的组合）。首先创建项目：

npm create vite@latest my-i18n-app -- --template vue cd my-i18n-app npm install

安装核心依赖：

npm install vue-i18n@9 npm install @intlify/vite-plugin-vue-i18n -D

注意版本锁定：vue-i18n@9.2.2是当前最稳定的生产版本，避免用@latest导致意外升级。我们吃过亏：某次npm update升到9.3.0-beta，d()函数的hour12参数行为变更，导致所有时间显示错乱，回滚花了半天。

目录结构规划（这是经过3个项目验证的最优结构）：

src/ ├── locales/ # 语言包根目录 │ ├── zh-CN.json # 中文 │ ├── en-US.json # 英文 │ ├── ja-JP.json # 日文 │ └── index.ts # 加载器 ├── i18n/ # i18n 核心配置 │ └── index.ts # createI18n 实例 ├── router/ # 路由（已集成 locale） │ └── index.ts ├── stores/ # Pinia store（可选，用于持久化 locale） │ └── useUserStore.ts └── main.ts # 入口文件

4.2 语言包标准化：JSON Schema 驱动的文案规范

不要手写 JSON！用 JSON Schema 强制约束结构。创建locales/schema.json：

{ "$schema": "https://json-schema.org/draft/2020-12/schema", "type": "object", "properties": { "common": { "type": "object", "properties": { "button": { "type": "object", "properties": { "submit": { "type": "string" }, "cancel": { "type": "string" } } } } }, "user": { "type": "object", "properties": { "login": { "type": "object", "properties": { "success": { "type": "string" } } } } } } }

然后用ajv工具校验：

npm install ajv -D npx ajv compile -s locales/schema.json -r locales/*.json

每次提交前 CI 运行校验，不符合 schema 的 JSON 直接拒绝合并。我们规定：所有文案必须用{}包裹变量，禁止拼接字符串，比如"欢迎{username}"而不是"欢迎" + username，确保t('user.login.success', { username: '张三' })能正确替换。

4.3 创建 i18n 实例：支持 SSR、热更新、错误降级的健壮实现

src/i18n/index.ts：

import { createI18n, I18n, LocaleMessages } from 'vue-i18n' import { loadLocaleMessages } from '@/locales' import { useUserStore } from '@/stores/useUserStore' // 创建空 i18n 实例，用于服务端预设 locale export let i18n: I18n // 客户端初始化函数 export async function setupI18n(app: App) { // 1. 从 localStorage 或 URL 获取首选 locale const userStore = useUserStore() let locale = userStore.locale || getLocaleFromUrl() || getBrowserLocale() // 2. 加载对应语言包 const messages = await loadLocaleMessages(locale) // 3. 创建 i18n 实例 i18n = createI18n({ legacy: false, locale, fallbackLocale: 'zh-CN', messages, // 数字格式：货币、百分比、普通数字 numberFormats: { 'zh-CN': { currency: { style: 'currency', currency: 'CNY', minimumFractionDigits: 2 }, percent: { style: 'percent', minimumFractionDigits: 0 }, decimal: { minimumFractionDigits: 0, maximumFractionDigits: 2 } }, 'en-US': { currency: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 }, percent: { style: 'percent', minimumFractionDigits: 0 }, decimal: { minimumFractionDigits: 0, maximumFractionDigits: 2 } } }, // 日期格式 datetimeFormats: { 'zh-CN': { short: { year: 'numeric', month: 'short', day: 'numeric' }, long: { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' } }, 'en-US': { short: { year: 'numeric', month: 'short', day: 'numeric' }, long: { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' } } } }) // 4. 错误处理器：key 缺失时不报错，返回 key 本身 i18n.onWarn = (warn) => { if (warn.code === 'MISSING_KEY') { console.warn(`[i18n] Missing key: ${warn.message}`) // 不抛异常，避免页面崩溃 } } // 5. 挂载到 app app.use(i18n) // 6. 监听 locale 变化，持久化到 localStorage watch( () => i18n.locale.value, (newLocale) => { userStore.setLocale(newLocale) } ) } // 工具函数 function getLocaleFromUrl() { const path = location.pathname const match = path.match(/^\/(en-US|zh-CN|ja-JP)\//) return match ? match[1] : null } function getBrowserLocale() { const lang = navigator.language || 'zh-CN' return ['en-US', 'zh-CN', 'ja-JP'].includes(lang) ? lang : 'zh-CN' }

main.ts中调用：

import { createApp } from 'vue' import { setupI18n } from '@/i18n' import App from './App.vue' async function initApp() { const app = createApp(App) await setupI18n(app) app.mount('#app') } initApp()

4.4 路由与语言切换：无缝衔接的用户体验设计

src/router/index.ts（完整实现）：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' import { useI18n } from 'vue-i18n' import { useUserStore } from '@/stores/useUserStore' const routes: Array<RouteRecordRaw> = [ { path: '/:locale(en-US|zh-CN|ja-JP)?', component: () => import('@/layouts/DefaultLayout.vue'), children: [ { path: '', name: 'Home', component: () => import('@/views/Home.vue') }, { path: 'dashboard', name: 'Dashboard', component: () => import('@/views/Dashboard.vue') } ] } ] const router = createRouter({ history: createWebHistory(), routes }) // 全局前置守卫 router.beforeEach(async (to, from, next) => { const { locale } = to.params const i18n = useI18n() const userStore = useUserStore() // 1. 如果 URL 有 locale，同步到 i18n if (locale && locale !== i18n.locale.value) { try { // 动态加载语言包 const messages = await import(`@/locales/${locale}.json`) i18n.setLocaleMessage(locale as string, messages.default || messages) i18n.locale.value = locale as string userStore.setLocale(locale as string) } catch (e) { console.error(`Failed to load locale ${locale}`, e) // 加载失败，降级到 fallback i18n.locale.value = i18n.fallbackLocale as string next(`/${i18n.fallbackLocale}${to.fullPath}`) return } } // 2. 如果 URL 没有 locale，重定向到带 locale 的路径 if (!locale) { const targetLocale = userStore.locale || getBrowserLocale() next(`/${targetLocale}${to.fullPath}`) return } next() }) // 路由后置守卫：更新 document lang 属性 router.afterEach((to) => { const { locale } = to.params if (locale) { document.documentElement.lang = locale as string } }) export default router

配套的LanguageSwitcher.vue组件：

<template> <div class="language-switcher"> <button v-for="lang in availableLocales" :key="lang.code" @click="switchLocale(lang.code)" :class="{ active: currentLocale === lang.code }" :aria-label="`Switch to ${lang.name}`" > {{ lang.flag }} {{ lang.name }} </button> </div> </template> <script setup> import { useRouter, useRoute } from 'vue-router' import { useI18n } from 'vue-i18n' import { useUserStore } from '@/stores/useUserStore' const router = useRouter() const route = useRoute() const i18n = useI18n() const userStore = useUserStore() const availableLocales = [ { code: 'zh-CN', name: '简体中文', flag: '🇨🇳' }, { code: 'en-US', name: 'English', flag: '🇺🇸' }, { code: 'ja-JP', name: '日本語', flag: '🇯🇵' } ] const currentLocale = computed(() => i18n.locale.value) function switchLocale(locale: string) { // 构造新路径：保留当前路由，只改 locale 前缀 const newPath = `/${locale}${route.fullPath.replace(/^\/(en-US|zh-CN|ja-JP)\//, '/')}` router.push(newPath) } </script> <style scoped> .language-switcher button { background: none; border: 1px solid #ddd; padding: 4px 12px; margin-right: 8px; border-radius: 4px; cursor: pointer; } .language-switcher button.active { background: #007bff; color: white; border-color: #007bff; } </style>

4.5 高级功能：复数、性别、列表格式的精准处理

vue-i18n 内置了 ICU Message Format，支持复杂文案。例如：

zh-CN.json：

{ "notification": { "new_message": "{count, plural, =0 {没有新消息} =1 {有1条新消息} other {有{count}条新消息}}" } }

en-US.json：

{ "notification": { "new_message": "{count, plural, =0 {No new messages} =1 {You have 1 new message} other {You have # new messages}}" } }

在模板中使用：

<template> <div>{{ t('notification.new_message', { count: unreadCount }) }}</div> </template>

更进一步，支持性别：

{ "user": { "greeting": "{gender, select, male {欢迎先生} female {欢迎女士} other {欢迎}} {name}" } }

调用：t('user.greeting', { gender: 'female', name: '李女士' })

我们还封装了列表格式化：

// composables/useI18nList.ts import { useI18n } from 'vue-i18n' export function useI18nList(items: string[], type: 'conjunction' | 'disjunction' = 'conjunction') { const { n } = useI18n() // 使用 Intl.ListFormat 处理列表 const formatter = new Intl.ListFormat(n.locale.value, { type }) return formatter.format(items) }

这样['苹果', '香蕉', '橙子']在中文下显示为“苹果、香蕉和橙子”，在英文下为“apple, banana, and orange”。

5. 常见问题与排查技巧实录：来自6个项目的血泪经验总结

5.1 问题速查表：高频故障与一键修复方案

5.2 独家避坑技巧：那些文档里不会写的实战经验

技巧1：用i18n-t组件替代{{ t() }}，避免模板语法污染
<i18n-t>是 vue-i18n 提供的内置组件，它能自动响应 locale 变化，且支持插槽嵌入 HTML：

<i18n-t keypath="user.login.success" tag="p"> <span class="highlight">{{ userName }}</span> </i18n-t>

对应zh-CN.json：

{ "user": { "login": { "success": "欢迎回来，{0}！" } } }

这样比{{ t('user.login.success', [userName]) }}更安全，且支持样式穿透。

技巧2：开发时强制启用所有语言，暴露隐藏问题
在vite.config.ts中添加：

//