Vue多语言教程-CSDN博客

初始化项目

Create Vue 项目和 install vue-i18n

vue create vue-multilang

null null

使用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显示英文

源码地址：GitHub^[1]