当前位置：首页 > VUE

vue实现双语网站

2026-03-29 21:36:34VUE

实现双语网站的基本思路

在Vue中实现双语网站通常需要以下核心功能：语言切换、文本翻译、路由处理（可选）、日期/货币本地化等。以下是具体实现方法：

安装国际化插件

推荐使用vue-i18n库处理多语言：

npm install vue-i18n

配置语言文件

创建语言资源文件（如locales/en.json和locales/zh.json）：

// en.json
{
  "welcome": "Welcome",
  "about": "About Us"
}

// zh.json
{
  "welcome": "欢迎",
  "about": "关于我们"
}

初始化i18n实例

在Vue项目中设置i18n：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en', // 默认语言
  fallbackLocale: 'en', // 回退语言
  messages: {
    en: require('./locales/en.json'),
    zh: require('./locales/zh.json')
  }
})

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

在模板中使用翻译

通过$t方法调用翻译：

<template>
  <h1>{{ $t('welcome') }}</h1>
</template>

实现语言切换

添加语言切换组件：

<template>
  <select v-model="$i18n.locale">
    <option value="en">English</option>
    <option value="zh">中文</option>
  </select>
</template>

处理动态路由

如果需要URL包含语言标识（如/en/about）：

// router.js
const router = new VueRouter({
  routes: [
    {
      path: '/:lang',
      component: Layout,
      children: [
        { path: 'about', component: About }
      ]
    }
  ]
})

// 导航守卫中同步语言状态
router.beforeEach((to, from, next) => {
  const lang = to.params.lang
  if (['en', 'zh'].includes(lang)) {
    i18n.locale = lang
  }
  next()
})

本地化日期和数字

使用@formatjs/intl进行高级本地化：

import { DateTimeFormat } from '@formatjs/intl-datetimeformat'

const date = new Date()
new Intl.DateTimeFormat(i18n.locale).format(date)

持久化语言选择

使用localStorage保存用户选择：

// 初始化时读取
const savedLang = localStorage.getItem('lang')
i18n.locale = savedLang || navigator.language.slice(0,2) || 'en'

// 切换时保存
watch(() => i18n.locale, (newVal) => {
  localStorage.setItem('lang', newVal)
})