VUE的国际化，怎么实现

Vue 国际化 (i18n) 主要通过vue-i18n​ 库实现。以下是完整的实现步骤：

1. 安装 vue-i18n

npm install vue-i18n # 或 yarn add vue-i18n

2. 基本配置

创建 i18n 实例

// src/i18n/index.js import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) // 语言包 const messages = { en: { message: { hello: 'Hello World', welcome: 'Welcome!', user: { name: 'Name', age: 'Age' } }, button: { submit: 'Submit', cancel: 'Cancel' } }, zh: { message: { hello: '你好，世界', welcome: '欢迎！', user: { name: '姓名', age: '年龄' } }, button: { submit: '提交', cancel: '取消' } }, ja: { message: { hello: 'こんにちは、世界', welcome: 'ようこそ！' } } } // 创建实例 const i18n = new VueI18n({ locale: 'zh', // 默认语言 fallbackLocale: 'en', // 回退语言 messages, // 语言包 silentTranslationWarn: true // 禁止警告 }) export default i18n

在 main.js 中引入

// src/main.js import Vue from 'vue' import App from './App.vue' import i18n from './i18n' new Vue({ i18n, render: h => h(App) }).$mount('#app')

3. 在组件中使用

模板中使用

<template> <div> <!-- 基本用法 --> <p>{{ $t('message.hello') }}</p> <!-- 带参数 --> <p>{{ $t('message.welcome', { name: 'John' }) }}</p> <!-- 复数形式 --> <p>{{ $tc('cart.item', 3, { count: 3 }) }}</p> <!-- 指令方式 --> <p v-t="'message.hello'"></p> <!-- 属性绑定 --> <input :placeholder="$t('message.user.name')"> <!-- 切换语言按钮 --> <button @click="changeLang('en')">English</button> <button @click="changeLang('zh')">中文</button> </div> </template> <script> export default { methods: { changeLang(lang) { this.$i18n.locale = lang localStorage.setItem('lang', lang) // 保存语言偏好 } }, mounted() { // 读取保存的语言设置 const savedLang = localStorage.getItem('lang') if (savedLang) { this.$i18n.locale = savedLang } } } </script>

JavaScript 中使用

// 在方法或计算属性中 export default { methods: { showMessage() { alert(this.$t('message.welcome')) }, getTranslatedText() { return this.$t('button.submit') } } }

4. 语言包按需加载（推荐）

创建语言文件

src/ locales/ en.json zh.json ja.json

// src/locales/en.json { "common": { "save": "Save", "cancel": "Cancel" }, "login": { "title": "Login", "username": "Username" } }

配置懒加载

// src/i18n/index.js import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) // 创建实例 const i18n = new VueI18n({ locale: localStorage.getItem('lang') || 'zh', fallbackLocale: 'en', messages: {} // 初始为空 }) // 已加载的语言 const loadedLanguages = [] // 异步加载语言包 function setI18nLanguage(lang) { i18n.locale = lang document.querySelector('html').setAttribute('lang', lang) return lang } export function loadLanguageAsync(lang) { if (i18n.locale === lang) { return Promise.resolve(setI18nLanguage(lang)) } if (loadedLanguages.includes(lang)) { return Promise.resolve(setI18nLanguage(lang)) } return import(`@/locales/${lang}.json`).then(messages => { i18n.setLocaleMessage(lang, messages.default || messages) loadedLanguages.push(lang) return setI18nLanguage(lang) }) } export default i18n

5. 在路由中使用

// router/index.js import Vue from 'vue' import VueRouter from 'vue-router' import { loadLanguageAsync } from '@/i18n' Vue.use(VueRouter) const router = new VueRouter({ routes: [ { path: '/:lang', component: () => import('@/views/Home.vue'), beforeEnter: async (to, from, next) => { const lang = to.params.lang await loadLanguageAsync(lang) next() } } ] })

6. 组件内单独定义

<template> <div>{{ $t('myComponent.title') }}</div> </template> <script> export default { i18n: { messages: { en: { title: 'My Component' }, zh: { title: '我的组件' } } } } </script>

7. 数字和日期格式化

// 数字格式化 $n(1000, 'currency') // $1,000.00 // 日期格式化 $d(new Date(), 'short')

8. 最佳实践

项目结构

src/ i18n/ index.js # 主配置文件 languages/ # 语言包目录 en/ common.json login.json zh/ common.json login.json utils.js # 工具函数

语言包模块化

// 自动导入所有语言文件 const modules = {} const requireModule = require.context( './languages', true, /\.json$/ ) requireModule.keys().forEach(fileName => { const path = fileName.replace(/(\.\/|\.json$)/g, '').split('/') const lang = path[0] const moduleName = path[1] if (!modules[lang]) modules[lang] = {} modules[lang][moduleName] = requireModule(fileName) })

TypeScript 支持

// src/i18n.d.ts declare module 'vue/types/vue' { interface Vue { $t: (key: string, values?: any) => string } }

9. 完整的切换组件示例

<template> <div class="language-switcher"> <select v-model="$i18n.locale" @change="changeLanguage"> <option value="en">English</option> <option value="zh">中文</option> <option value="ja">日本語</option> </select> </div> </template> <script> export default { name: 'LanguageSwitcher', methods: { changeLanguage() { localStorage.setItem('lang', this.$i18n.locale) location.reload() // 或重新加载语言包 } } } </script>

10. 注意事项

1. 命名约定：使用点分隔的键名，保持层次清晰

2. 提取文本：使用工具提取模板中的文本，如vue-i18n-extract

3. 动态内容：动态键名使用$t函数，而不是在模板中拼接

4. 回退策略：设置合适的 fallback locale

5. SEO优化：为不同语言设置不同的URL，使用<link rel="alternate">

这是 Vue 国际化的完整实现方案。根据项目复杂度，可以选择简单或高级的配置方式。