Vue多语言教程

Posted 2021-04-16 前端精髓

初始化项目

Create Vue 项目和 install vue-i18n

vue create vue-multilang

使用vue-i18n加载语言包

// src/main.js
import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import VueI18n from 'vue-i18n'import messages from './lang'
Vue.config.productionTip = false
Vue.use(VueI18n)export const i18n = new VueI18n({ locale: 'zh', fallbackLocale: 'zh', messages})new Vue({ router, store, i18n, render: h => h(App)}).$mount('#app')

创建语言文件

多语言文件的统一入口，加载各种语言文件，这里我定义了中文和英文两种。

// src/lang/index.js
import zh from './translations/zh.json'import en from './translations/en.json'
export default { zh, en}

在英文中，button翻译为button，前面是字段名称，后面是翻译内容，等等。

// src/lang/translations/en.json
{ "button": "button", "color": "color", "home": "Home", "about": "About"}

在中文中，button翻译为按钮，前面是字段名称，后面是翻译内容，等等。

// src/lang/translations/zh.json
{ "button": "按钮", "color": "颜色", "home": "首页", "about": "关于"}

配置路由

// src/router/index.js
import Vue from 'vue'import VueRouter from 'vue-router'import { i18n } from '../main'import RouterView from '../views/RouterView.vue'
Vue.use(VueRouter)
const routes = [ { path: '/:lang', name: 'routerView', component: RouterView, beforeEnter: (to, from, next) => { const lang = to.params.lang; if (!['zh', 'en'].includes(lang)) return next('zh') if (i18n.locale !== lang) { i18n.locale = lang } return next() }, children: [ { path: 'home', name: 'home', component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue') }, { path: 'about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') } ] }]
const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes})
export default router

在RouterView.vue里面配置两个菜单选择。

<template> <div> <router-link :to="'/' + $i18n.locale + '/home'"> {{ $t('home') }} </router-link>| <router-link :to="'/' + $i18n.locale + '/about'"> {{ $t('about') }} </router-link> <router-view></router-view> </div></template>

在About.vue中翻译button字段。

<template> <div class="about"> <p>{{ $t('button') }}</p> </div></template>

在Home.vue中翻译color字段。

<template> <div class="home"> <p>{{ $t('color') }}</p> </div></template>

在App.vue中做语言切换选择

<template> <div id="app"> 切换语言<language-switcher></language-switcher> <router-view></router-view> <div></div> </div></template>
<script>import LanguageSwitcher from './views/LanguageSwitcher'
export default { components: { LanguageSwitcher }}</script>

切换语言的LanguageSwitcher.vue组件，用来手动切换。

<template> <div class="locale-changer"> <select v-model="$i18n.locale"> <option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang" >{{ lang }}</option > </select> </div></template>
<script>export default { name: 'LanguageSwitcher', data() { return { langs: ['zh', 'en'] }; }};</script>

访问http://localhost:8080/zh/home显示中文

访问http://localhost:8080/en/home显示英文

References

[1] GitHub: https://github.com/wuxianqiang/Vuei18n