Vue 3 国际化实战：用 vue-i18n 切换多语言并懒加载语言包

为什么把文案抽成多语言包

面向多地区用户的产品，不能把中文写死在模板里。vue-i18n 把文案集中到语言包，模板用 t() 取词，运行时切换 locale 即可整体换语言，无需刷新页面。

安装与最小配置

// i18n/index.ts
import { createI18n } from "vue-i18n";

const messages = {
  zh: { welcome: "欢迎回来", logout: "退出登录" },
  en: { welcome: "Welcome back", logout: "Log out" },
};

export const i18n = createI18n({
  legacy: false,            // Vue 3 组合式 API 推荐关闭 legacy 模式
  locale: "zh",
  fallbackLocale: "en",
  messages,
});

在模板与脚本里取词

<template>
  <p>{{ t("welcome") }}</p>
  <button @click="locale = 'en'">EN</button>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
</script>

带参数的文案与复数

语言包支持占位符，复数形态交由各语言自己的规则处理。

const messages = {
  en: { cart: "You have {n} item | You have {n} items" },
  zh: { cart: "你有 {n} 件商品" },
};

// 模板中使用
// {{ t("cart", { n: 3 }) }}

懒加载语言包，控制首屏体积

默认把所有语言打进包会拖慢首屏。按 locale 动态 import，只有切换到该语言才下载对应 json。

async function loadLocale(loc: string) {
  const mod = await import(`../locales/${loc}.json`);
  i18n.global.setLocaleMessage(loc, mod.default);
  i18n.global.locale.value = loc;
}

把用户选择持久化

• 切换语言时写 localStorage，下次进入直接读，避免每次回退到默认语言。
• 后端接口也需跟随 locale：把 locale 放进请求头，服务端按语言返回文案或排序规则。
• 新增语言只需补一个 json 并在 loadLocale 里登记，组件层无需改动。