vue实现多语言
Vue 实现多语言方案
使用 vue-i18n 插件
安装 vue-i18n 依赖：
npm install vue-i18n在项目中创建语言资源文件，例如：
// src/locales/en.json
{
"welcome": "Welcome",
"home": "Home"
}
// src/locales/zh.json
{
"welcome": "欢迎",
"home": "首页"
}初始化 vue-i18n：
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './locales/en.json'
import zh from './locales/zh.json'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'en', // 默认语言
messages: {
en,
zh
}
})
new Vue({
i18n,
render: h => h(App)
}).$mount('#app')在组件中使用：
<template>
<div>{{ $t('welcome') }}</div>
</template>切换语言：
this.$i18n.locale = 'zh'动态加载语言包
对于大型应用，可以按需加载语言包：
async function loadLocaleMessages(locale) {
const messages = await import(`./locales/${locale}.json`)
i18n.setLocaleMessage(locale, messages.default)
return nextTick()
}路由与语言切换结合
在路由守卫中处理语言切换：
router.beforeEach((to, from, next) => {
const lang = to.params.lang
if (lang && i18n.availableLocales.includes(lang)) {
i18n.locale = lang
}
next()
})日期和数字本地化
vue-i18n 也支持日期和数字格式化：
$d(new Date(), 'short')
$n(1000, 'currency')自定义翻译缺失处理
可以设置缺失翻译的回调：
const i18n = new VueI18n({
missing: (locale, key) => {
console.warn(`Missing translation: ${key} for locale ${locale}`)
return key
}
})服务端渲染支持
对于 SSR 应用，需要在服务器和客户端分别处理：
// 服务端
export default ({ app }) => {
app.i18n = new VueI18n({ ... })
}
// 客户端
if (process.client) {
const lang = navigator.language.split('-')[0]
i18n.locale = lang
}浏览器语言自动检测
可以通过 navigator 对象获取用户首选语言：
const userLang = navigator.language || navigator.userLanguage
const shortLang = userLang.split('-')[0]
if (i18n.availableLocales.includes(shortLang)) {
i18n.locale = shortLang
}持久化语言选择
使用 localStorage 保存用户选择：
// 读取
const savedLang = localStorage.getItem('user-lang') || 'en'
i18n.locale = savedLang
// 保存
localStorage.setItem('user-lang', newLang)命名空间支持
对于大型项目，可以使用命名空间组织翻译：
{
"user": {
"profile": "Profile",
"settings": "Settings"
}
}使用时：
{{ $t('user.profile') }}
