核心内容摘要
黄品汇：不止于藏品，更是品鉴生活的美学殿堂
Vue 国际化 (i18n) 主要通过vue-i18n 库实现。
以下是完整的实现步骤
安装 vue-i18nnpm install vue-i18n # 或 yarn add vue-i18n
基本配置创建 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)
在组件中使用模板中使用template div !-- 基本用法 -- p/p !-- 带参数 -- p/p !-- 复数形式 -- p/p !-- 指令方式 -- p v-tmessage.hello/p !-- 属性绑定 -- input :placeholder$t(message.user.name) !-- 切换语言按钮 -- button clickchangeLang(en)English/button button clickchangeLang(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 } } } /scriptJavaScript 中使用// 在方法或计算属性中 export default { methods: { showMessage() { alert(this.$t(message.welcome)) }, getTranslatedText() { return this.$t(button.submit) } } }
语言包按需加载推荐创建语言文件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
在路由中使用// 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() } } ] })
组件内单独定义template div/div /template script export default { i18n: { messages: { en: { title: My Component }, zh: { title: 我的组件 } } } } /script
数字和日期格式化// 数字格式化 $n(1000, currency) // $1,
0
00 // 日期格式化 $d(new Date(), short)
最佳实践项目结构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 } }
完整的切换组件示例template div classlanguage-switcher select v-model$i18n.locale changechangeLanguage option valueenEnglish/option option valuezh中文/option option valueja日本語/option /select /div /template script export default { name: LanguageSwitcher, methods: { changeLanguage() { localStorage.setItem(lang, this.$i18n.locale) location.reload() // 或重新加载语言包 } } } /script
10.
注意事项命名约定使用点分隔的键名保持层次清晰提取文本使用工具提取模板中的文本如vue-i18n-extract动态内容动态键名使用$t函数而不是在模板中拼接回退策略设置合适的 fallback localeSEO优化为不同语言设置不同的URL使用link relalternate这是 Vue 国际化的完整实现方案。
根据项目复杂度可以选择简单或高级的配置方式。