Vue.js 实现一个通用的 Vue 国际化 (i18n) 方案-Vue.js-PHP中文网

vue项目国际化推荐使用vue-i18n v9配合typescript，通过按需加载json语言包、unplugin-vue-i18n生成类型提示、composition api调用t()函数及动态locale设置实现多语言支持。

vue.js 实现一个通用的 vue 国际化 (i18n) 方案

Vue 项目实现国际化，核心是让语言切换不影响组件逻辑，同时支持按需加载、类型安全和开发体验友好。推荐用 vue-i18n v9（适配 Vue 3 Composition API），搭配 TypeScript 和 JSON 多语言文件管理。

一、安装与基础配置

安装依赖：

npm install vue-i18n@9
确保项目已使用 Vue 3（createApp 方式初始化）

在 src/i18n/index.ts 中创建 i18n 实例：

import { createI18n } from 'vue-i18n';
import zhCN from './locales/zh-CN.json';
import enUS from './locales/en-US.json';

const messages = {
  'zh-CN': zhCN,
  'en-US': enUS
};

export const i18n = createI18n({
  locale: localStorage.getItem('lang') || 'zh-CN',
  fallbackLocale: 'zh-CN',
  messages,
  legacy: false,
  globalInjection: true
});

在 main.ts 中挂载：

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

const app = createApp(App);
app.use(i18n);
app.mount('#app');

二、多语言资源组织与类型提示

将语言文件放在 src/i18n/locales/ 下，如 zh-CN.json：

{
  "common": {
    "save": "保存",
    "cancel": "取消"
  },
  "user": {
    "name": "姓名",
    "email": "邮箱"
  }
}

为获得自动类型推导，可生成 TS 类型声明：

用 i18n-typings-generator 或手动定义接口
或借助 unplugin-vue-i18n 在构建时自动生成类型（推荐）

安装插件：npm install -D unplugin-vue-i18n，并在 vite.config.ts 中配置：

Browser Js

轻量级CDP浏览器控制，适用于AI代理。相较于内置浏览器工具，token消耗降低3‑10倍，仅在浏览时使用。

下载

import VueI18n from 'unplugin-vue-i18n/vite';

export default defineConfig({
  plugins: [
    VueI18n({
      include: resolve(__dirname, 'src/i18n/locales/**'),
      compositionOnly: true
    })
  ]
});

这样 useI18n() 的 t() 函数就能获得精准的 key 提示和类型检查。

三、组合式 API 中使用翻译

在 setup 或 script setup 中直接调用：

<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { t, locale } = useI18n();

// 使用翻译
const title = t('common.save');

// 切换语言（并持久化）
const changeLang = (lang: string) => {
  locale.value = lang;
  localStorage.setItem('lang', lang);
};
</script>

模板中也可直接用 $t（因启用了 globalInjection: true）：

<template><button>{{ $t('common.save') }}</button>
</template>

四、支持动态语言包异步加载

避免首屏加载全部语言包，可按需导入：

// src/i18n/index.ts
export async function loadLocaleMessages(locale: string): Promise<any> {
  try {
    const messages = await import(`./locales/${locale}.json`);
    return messages.default;
  } catch (e) {
    return {};
  }
}

// 动态设置 locale（含加载）
export async function setLocale(i18n: I18n, locale: string) {
  const loadedMessages = await loadLocaleMessages(locale);
  i18n.locale.value = locale;
  if (!i18n.availableLocales.includes(locale)) {
    i18n.setLocaleMessage(locale, loadedMessages);
  }
}
</any>

组件内调用：

const { locale } = useI18n();
const changeLang = async (lang: string) => {
  await setLocale(i18n, lang);
  locale.value = lang;
  localStorage.setItem('lang', lang);
};

不复杂但容易忽略：语言切换后需确保路由、表单、日期格式等同步更新；建议配合 provide/inject 或 Pinia 管理全局语言状态，便于跨组件响应。