vue实现双语网站
Vue 实现双语网站的步骤
安装依赖
使用 vue-i18n 插件实现国际化，安装命令如下：
npm install vue-i18n配置语言文件
创建语言资源文件，例如 en.json 和 zh.json，分别存储英文和中文的翻译内容。文件结构示例：
// en.json
{
"welcome": "Welcome",
"about": "About Us"
}// zh.json
{
"welcome": "欢迎",
"about": "关于我们"
}初始化 vue-i18n
在 Vue 项目的入口文件（如 main.js）中配置 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')切换语言
在组件中添加语言切换功能，通过修改 this.$i18n.locale 实现：
methods: {
changeLanguage(lang) {
this.$i18n.locale = lang
}
}模板中使用翻译
在 Vue 模板中使用 $t 方法显示翻译内容：
<template>
<div>
<h1>{{ $t('welcome') }}</h1>
<button @click="changeLanguage('en')">English</button>
<button @click="changeLanguage('zh')">中文</button>
</div>
</template>动态加载语言文件
对于大型项目，可以按需加载语言文件以减少初始加载时间：
async changeLanguage(lang) {
const messages = await import(`./locales/${lang}.json`)
this.$i18n.setLocaleMessage(lang, messages.default)
this.$i18n.locale = lang
}路由与语言结合
在多页面应用中，可以将语言代码作为路由前缀：
const router = new VueRouter({
routes: [
{
path: '/:lang',
component: Layout,
children: [
{ path: '', component: Home }
]
}
]
})持久化语言选择
使用 localStorage 保存用户的语言偏好，确保下次访问时保持一致性：
created() {
const savedLang = localStorage.getItem('language')
if (savedLang) {
this.$i18n.locale = savedLang
}
},
methods: {
changeLanguage(lang) {
this.$i18n.locale = lang
localStorage.setItem('language', lang)
}
}日期和数字本地化
对于日期、时间、货币等本地化需求，可以使用 Intl API 或额外库如 moment.js：
new Date().toLocaleDateString(this.$i18n.locale)
