vue+vue-i18n搭建國際化網站【兼容Element-UI、動態切換css】

今天想來寫一下以前爲項目搭建的國際化（i18n）功能，因爲以前項目主要是使用的Vue+Element-UI，因此本文章中分別有vue-i18n和兼容element-ui的vue-i18n兩種寫法，你們能夠按需參考。

前言

本文是基於vue進行實現的國際化功能，我假設你對vue已經有了必定的瞭解，而且已經擁有了屬於你本身的vue項目環境，這裏不作過多闡述。

若是你只是急需一個已經搭建好的i18n模版，也能夠直接去個人github倉庫下載我已經寫好的項目模版。

vue-i18n

安裝vue-i18n

npm install vue-i18n

配置文件

以下圖建立i18n文件夾，在i18n文件夾裏分別建立i18n.js、langs文件夾，在langs文件夾下面建立你的語言文件（cn.js/en.js/ja.js）和index.js文件。
語言包分別爲中文/英文/日語，你們在項目中選擇建立本身須要的語言包便可。

i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './langs'

Vue.use(VueI18n)
//從localStorage中拿到用戶的語言選擇，若是沒有，那默認中文。
const i18n = new VueI18n({
  locale: localStorage.lang || 'cn',
  messages,
})
export default i18n

index.js

import en from './en'
import cn from './cn'
import ja from './ja'
export default {
  en,
  cn,
  ja,
}

cn.js

const cn = {
    message: {
        'hello': '你好',
    }
}

export default cn 

en.js

const en = {
    message: {
        'hello': 'hello',
    }
}

export default en

ja.js

const ja = {
    message: {
        'hello': 'こんにちは',
    }
}

export default ja

🌟 在配置語言包的時候，key值必定要保持統一，由於i18n是經過你的key值來切換語言的，若是key值有誤，就不能正確的切換語言包，這一點千萬要注意。

main.js

import i18n from './i18n/i18n'

new Vue({
  el: '#app',
  i18n, //加上i18n
  components: { App },
  template: '<App/>'
})

到此咱們的i18n已經所有配置結束了，下面咱們去頁面中進行使用。

配置頁面

HTML部分

<p>{{$t(‘message.hello’)}}</p>//此時應該是中文
   <button @click="switchLang('en')">英語</button>
   <button @click="switchLang('cn')">中文</button>
   <button @click="switchLang('ja')">日語</button>

Js部分

methods:{
    switchLang(lang)  {
        this.$i18n.locale = lang 
        //把語言保存在localStorage中
        localStorage.setItem('lang',lang);
    }
  },

到此，運行npm run dev就能夠看到能夠進行語言切換的項目了。

根據語言切換css

到此，咱們已經實現了基本的國際化功能。可是，咱們在切換語言的時候不得不面臨的一個問題就是由於語言的不一樣，即便是同一句話，文字樣式的長度也會不一樣。因此這時候特別容易產生一些頁面樣式上的結構錯位，爲此咱們就須要根據不一樣語言來切換項目的css。我這邊提供的思路是在最上層html的div上添加一個能夠動態切換class的變量，以改變項目的父級的class名稱，實現切換語言的同時切換css樣式。

HTML部分

<template>
  <div :class="langCss">
  </div>
</template>

Js部分

在data中定義保存class的變量

data () {
    return {
      langCss:window.localStorage.getItem('lang')||'cn',
      //先去取localStorage裏保存的語言，若是沒有，那麼就默認中文
      //這麼作的意義是爲了用戶在刷新頁面的時候樣式不丟失。
    }

緊接着在咱們的switchlLang函數後添加新的一行，以便在切換語言的同時切換class。

switchLang(lang)  {
        this.$i18n.locale = lang 
        localStorage.setItem('lang',lang);
        this.langCss=lang;//新添加的，以便切換父級class
    }

Css部分

在style標籤中中設置你想要的樣式，我這邊以改變文字顏色爲例。

.en button {
  color: steelblue;
}
.cn button {
  color: #666;
}
.ja button {
  color: seagreen;
}

到此vue-i18n的內容就所有結束了，因爲如今不少人在使用vue的同時會搭配Element-UI使用，因此咱們在如今的基礎上優化一下咱們的項目，以即可以兼容Element-UI。

兼容Element-UI的i18n

參考網址

Element組件文檔
Element官網-i18n

安裝Element相關依賴

npm i element-ui -s

修改配置

main.js

//引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
  store:store,
  i18n,
  ElementUI,//添加element-ui
  el: '#app',
  components: { App },
  template: '<App/>',
})

i18n.js

import Vue from 'vue';
import locale from 'element-ui/lib/locale';
import VueI18n from 'vue-i18n';

import messages from './langs';
Vue.use(VueI18n);
//從localStorage中拿到用戶的語言選擇，若是沒有，那默認中文。
const i18n = new VueI18n({
    locale: localStorage.lang || 'cn',
    messages,
})
locale.i18n((key, value) => i18n.t(key, value)) //爲了實現element插件的多語言切換

export default i18n

修改語言包

// en.js
import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
    message: {
        'hello': 'hello',
    },
    ...enLocale
}

export default en;

// **********分割線**********

// cn.js
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const cn = {
    message: {
        hello: '你好，世界',
    },
    ...zhLocale
}

export default cn;

// **********分割線**********

// ja.js
import jaLocale from 'element-ui/lib/locale/lang/ja'
const ja = {
    message: {
        hello: 'こんにちは、世界',
    },
    ...jaLocale
}

export default ja;

若是console裏有如⬇️警告，證實的你語言包沒有配置正確，返回上一步【修改語言包】查看。

配置頁面

引用組件

至此，咱們就能夠引入一個Element-UI的組件進行開發了，這裏以dialog組件爲例演示一下基於Element-UI的文字國際化方案。固然，你也能夠去Element組件文檔去引用一些別的組件，這全看你本身的項目須要。

我引用的是第一個dialog組件【基本用法】，引用成功後，頁面以下圖，這裏不對組件引用作過多闡述。

此時切換語言後，咱們發現暴露在外層咱們可修改的語言文字並不會有變化，可是你點擊右上角的關閉符號後，會發現裏面內置的語言已經改變了。

Js調用

下面須要咱們來手動配置一下未切換文字的語言包，配置方法同上文的【配置頁面】，這裏我順便說一下，在js裏調用國際化直接用this.$t(‘message.xxx’)便可，以下。

handleClose(done) {
        this.$confirm(this.$t('message.confirm'))//js內部切換
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }

github地址

到此，國際化內容所有結束，我把全部代碼都放到了個人github倉庫上，裏面提供了vue-i18n以及兼容Element-UI的兩種國際化版本。假如上文中還有哪裏不明白的，能夠直接下載下來參考。

若是有任何疑問或補充，歡迎在評論區給我留言討論。

或者來個人博客看個人最新更新，我平時還會總結一些日語的小知識，喜歡日語的小夥伴也能夠和我一塊兒溝通討論。

感謝觀看
鞠躬 ～