Nuxt 配置國際化vue-i18n，切換多種語言, 配合element-ui

@Jeanntte

最近由於須要弄一個英文(en)/中文(zh)/西班牙(es)語言的網站，用SSR的Nuxt構建, 再配合vue-i18n去解決切換語言問題

step1 : 安裝vue-i18n

npm install vue-i18n --save-dev 
複製代碼

step2 : 新增locals文件

在根目錄新建locales

新建zh.json / en.json / es.json 按需配置語言(備註： 分別對應 中文 / 英文 / 西班牙)

zh.json

{
    "links": {
      "home": "首頁"
    },
    "home": {
      "title": "歡迎來到首頁",
      "meta": "這是一個簡單的網站"
    }
  }
  
複製代碼

en.json

{
    "links": {
      "home": "Home"
    },
    "home": {
      "title": "Welcome to the homepage",
      "meta": "This is a simple website"
    }
  }
  
複製代碼

es.json

{
    "links": {
      "home": "Inicio"
    },
    "home": {
      "title": "Bienvenido a la pagina de inicio",
      "meta": "Este es un sitio web simple"
    }
  }
  
複製代碼

step3： 在plugins新建i18.ts並配置與配置vuex

• 配置state

export const state = (): Istate => ({
    locales: ['en', 'zh', 'es'],
    locale: 'zh'
})
複製代碼

• 配置mutations

export const mutations = {
    [types.SET_LANG](state, locale) {
        if (state.locales.indexOf(locale) !== -1) {
            state.locale = locale
        }
    }
}
複製代碼

• 配置types

export const SET_LANG = 'SET_LANG'
複製代碼

• 在目錄plugins新建i18.ts

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import ElementLocale from 'element-ui/lib/locale'


// 加入Vue全局
Vue.use(VueI18n)


export default ({ app, store }) => {
  // Set i18n instance on app
  // This way we can use it in middleware and pages asyncData/fetch
  app.i18n = new VueI18n({
    locale: store.state.locale,
    fallbackLocale: 'en',
    messages: {
      'en': { ...require('~/locales/en.json') , ...enLocale },
      'zh': { ...require('~/locales/zh.json'),  ...zhLocale },
      'es': { ...require('~/locales/es.json'),  ...zhLocale },
    }
  });
  
  app.i18n.path = (link) => {
    if (app.i18n.locale === app.i18n.fallbackLocale) {
      return `/${link}`;
    }
    return `/${app.i18n.locale}/${link}`;
  }
  // 配置element-ui的組件國際化
  ElementLocale.i18n((key, value) => app.i18n.t(key, value))
}
複製代碼

step4 : 配置Nuxt的配置文件nuxt.config.ts

用於指定vue-i18n的一些配置文件 nuxt.config.ts

• 配置 nuxt.config.ts 文件

import NuxtConfiguration from '@nuxt/config'

const config: NuxtConfiguration = {
    .... # 其它配置內容忽略,新增plugins&build.verdor
 plugins: [ '~/plugins/i18n.ts' ], build: { vendor: ['vue-i18n'], } } export default config 複製代碼

step5: 完結

當點擊事件觸發切換以後，經過更改切換

this.$i18n.locale = 'zh' | 'es' | 'en';
    // 經過切換語言
複製代碼

結語：

切換國際化仍是挺方便的，經過自定義與elementUi的語言庫，這樣就完美了...