vue中如何使用i18n實(shí)現(xiàn)國際化

一、前言

項目中需要實(shí)現(xiàn)多語言切換，這時候接觸到國際化，前端框架無數(shù)，其中幾種熱門的框架都有相匹配的國際化插件工具。例如：

vue + vue-i18n
angular + angular-translate
react + react-intl
jquery + jquery.i18n.property

二、Vue項目實(shí)現(xiàn)國際化

這里來對vue使用vue-i18n這個插件進(jìn)行國際化功能的實(shí)現(xiàn)

1、首先在自己的項目中安裝 vue-i18n依賴包。

npm install vue-i18n --S

2、創(chuàng)建語言包、i18n實(shí)例對象，并在main.js中引入：

|-- main.js 導(dǎo)入文件
|-- i18n
  |-- index.js 創(chuàng)建實(shí)例對象
  |-- languages 各種語言包
    |-- en-us.js  英文包
    |-- zh-cn.js  中文包

• i18n/index.js，創(chuàng)建i18n實(shí)例對象，代碼如下：

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

Vue.use(VueI18n)
 
// 注冊i18n實(shí)例并引入語言文件
const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    'zh': require('./languages/zh_cn'),
    'en': require('./languages/en_us')
  }
})

export default i18n

• 接下來我們就需要新建兩個js文件（或者josn文件）作為語言包。
  其中zh.js中文包中代碼為i18n/languages/zh：

module.exports = {
  message: {
    login: '歡迎登錄',
    lang:{
      zh: '中文',
      en: '英文'
    }
  }
}

其中en.js英文包中代碼為i18n/languages/en：

module.exports = {
    message: {
      login: 'Welcome To Login',
      lang: {
        zh: 'Chinese',
        en: 'English'
      }
    }
   }

• 將i18n實(shí)例對象掛載到Vue實(shí)例之上：main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import "@/assets/plugins/element-ui";
import i18n from '@/assets/plugins/i18n';

new Vue({
    i18n,  // 掛載到Vue實(shí)例之上
    router,
    store,
    render: (h) => h(App),
}).$mount("#app");

3. 實(shí)現(xiàn)中英文切換按鈕，代碼如下：

<template>
    <div>
        <div class="lang">
            <el-radio-group v-model="language" size="mini">
                <el-radio label="zh" border>{{ $t("message.lang.zh") }}</el-radio>
                <el-radio label="en" border>{{ $t("message.lang.en") }}</el-radio>
            </el-radio-group>
        </div>
    </div>
</template>

<script>
import Vue from "vue";
export default {
    data() {
        return {
            language: "zh",
        };
    },
    watch: {
        //偵聽單選按鈕的變化，從而進(jìn)行切換語言
        language: function(val) {
            val === "zh" ? (this.$i18n.locale = "zh") : (this.$i18n.locale = "en");
        },
    },
};
</script>

#補(bǔ)充vue-i18n 數(shù)據(jù)渲染的模板語法

模板語法暫時分為三種：

//vue組件模板的使用
<div>{{$t('message.zh')}}</div>

//vue組件模板數(shù)據(jù)綁定的使用
<input :placeholder="$t('message.zh')"></input>

//vue組件data中賦值的使用
data:{
   msg:this.$t('message.zh');
}