vue实现中英切换
国际化（i18n）方案
Vue 中实现中英切换通常采用 vue-i18n 库，以下是具体实现步骤：
安装依赖：
npm install vue-i18n配置多语言文件
创建语言资源文件，例如：
// en.json
{
"welcome": "Welcome",
"button": {
"submit": "Submit"
}
}
// zh-CN.json
{
"welcome": "欢迎",
"button": {
"submit": "提交"
}
}初始化 i18n 实例
在 Vue 项目中初始化国际化插件：
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const messages = {
en: require('./locales/en.json'),
'zh-CN': require('./locales/zh-CN.json')
}
const i18n = new VueI18n({
locale: 'en', // 默认语言
fallbackLocale: 'en', // 回退语言
messages
})
export default i18n在组件中使用
模板中使用 $t 方法：
<template>
<div>
<h1>{{ $t('welcome') }}</h1>
<button>{{ $t('button.submit') }}</button>
</div>
</template>脚本中切换语言：
methods: {
changeLanguage(lang) {
this.$i18n.locale = lang
}
}语言切换组件
实现一个语言切换下拉框：
<select v-model="$i18n.locale">
<option value="en">English</option>
<option value="zh-CN">中文</option>
</select>持久化存储
为保持用户选择的语言，可使用 localStorage：
created() {
const savedLocale = localStorage.getItem('locale')
if (savedLocale) {
this.$i18n.locale = savedLocale
}
},
watch: {
'$i18n.locale'(newVal) {
localStorage.setItem('locale', newVal)
}
}动态导入优化
对于大型项目，建议按需加载语言包：
async changeLanguage(lang) {
const messages = await import(`@/locales/${lang}.json`)
this.$i18n.setLocaleMessage(lang, messages.default)
this.$i18n.locale = lang
}日期时间本地化
处理日期时间格式差异：
import { DateTime } from 'luxon'
const dateFormats = {
en: {
short: {
year: 'numeric', month: 'short', day: 'numeric'
}
},
'zh-CN': {
short: {
year: 'numeric', month: 'short', day: 'numeric'
}
}
}
const i18n = new VueI18n({
dateTimeFormats: dateFormats
})模板中使用：
<span>{{ $d(new Date(), 'short') }}</span>
