文章目錄

前言
一、vue-i18n是什麼？
二、使用步驟
- 1.安裝vue-i18n
- 2.添加本地翻譯資訊
- 3.建立帶有選項的i18n對象和設定預設語言辨別
- 4.将i18n對象挂載到Vue執行個體
- 4.處理公共頭部的語言切換事件
- 5.在html模闆中使用
- 6.最終效果
總結

前言

在前面的文章head頭部中，有一個中英文切換的按鈕，那麼這篇文章将實作一個簡單的中英文切換。在vue中，使用

vue-i18n

插件來實作這個功能。

提示：以下是本篇文章正文内容，下面案例可供參考

一、vue-i18n是什麼？

一款針對Vue.js 的國際化插件。把網站的所有需要中英轉換的資料配置成中英文json檔案，需要編寫大量中英文對照表，适合于少量的固定翻譯。

二、使用步驟

1.安裝vue-i18n

npm安裝指令

npm install vue-i18n

安裝成功如圖（示例）：

在嗎？手把手教vue-cli4+elementUI搭建通用背景管理系統---(二)vue-i18n中英文切換前言一、vue-i18n是什麼？二、使用步驟總結

2.添加本地翻譯資訊

本地翻譯資訊有兩個，zh.js中文和en.js英文，這兩個js的内容是一一對照的。

在

src檔案夾下

建立lang檔案夾，并添加兩個zh.js和en.js檔案。

如下圖所示：

在嗎？手把手教vue-cli4+elementUI搭建通用背景管理系統---(二)vue-i18n中英文切換前言一、vue-i18n是什麼？二、使用步驟總結

en.js—英文

zh.js—中文

index.js----處理預設語言與導出i18n對象，友善在main.js中use

en.js

代碼如下（示例）：

import enLocale from 'element-ui/lib/locale/lang/en'

const en = {
    //全局配置
    add : 'add',
    welcome : 'welcome',

    //局部
    status : {
        disabled : 'disabled',  //不可用
        abled : 'abled'         //可用
    },

    //elementUI
    ...enLocale
}
export default en;

zh.js

代碼如下（示例）：

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

const zh = {
       //全局配置
       add : '添加',
       welcome : '歡迎您',

       //局部
       status : {
           disabled : '不可用',  //不可用
           abled : '可用'         //可用
       },
   
       //elementUI
       ...zhLocale
}
export default zh;

注意：

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import enLocale from 'element-ui/lib/locale/lang/en'

這是elementUI元件國際化。elementUI元件如何使用國際化中英文切換？

3.建立帶有選項的i18n對象和設定預設語言辨別

因為建立vue-i18n插件對象時，要傳入必要的選項，如

locale語言辨別

，

messages中英翻譯資訊

index.js

的功能主要是設定預設語言辨別和use到Vue對象，建立vue-i18n對象，并導出這個它，然後在main.js中挂載到vue執行個體對象。

index.js

代碼如下（示例）：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './en.js'
import zh from './zh.js'
Vue.use(VueI18n)
const messages = {
    en:en,
    zh:zh
}

export function getLanguage(){
    const chooseLanguage = window.localStorage.getItem("language");
    if(chooseLanguage)
        return chooseLanguage
    
    //如果沒有選擇語言，預設為zh
    const language = (navigator.language || navigator.browserLanguage).toLowerCase();
    const locales = Object.keys(messages);
    for(const locale of locales){
        if(language.indexOf(locale) > -1){
            console.log("locale===",locale)
            return locale;
        }
    }
    return 'zh'
}
const i18n = new VueI18n({
    locale: getLanguage(),
    messages
})

export default i18n

4.将i18n對象挂載到Vue執行個體

main.js

代碼如下（示例）：

import Vue from "vue";
import i18n from './lang/index'  //lang/index.js暴露了i18n對象，是以這裡引用

Vue.use(ElementUI);
new Vue({
  router,
  i18n,
  render: h => h(App)
}).$mount("#app");

4.處理公共頭部的語言切換事件

我們的頭部，如圖：

在嗎？手把手教vue-cli4+elementUI搭建通用背景管理系統---(二)vue-i18n中英文切換前言一、vue-i18n是什麼？二、使用步驟總結

頭部傳送門

TheHeader.vue

代碼如下（示例）：

<template>
  <div class="header">
    <div class="logo">
      <!--  -->
      <img src="../../public/img/logo.png" />
    </div>
    <div class="header-right">
      <div class="btn-fullscreen" @click.stop="handleFullScreen">
        <el-tooltip
          effect="light"
          :content="fullscreen ? '取消全屏' : '全屏'"
          placement="bottom"
        >
          <i class="iconfont icon-suofang"></i>
        </el-tooltip>
      </div>
      <div class="btn-changelan" @click.stop="handleLanguage">
        <el-tooltip
          effect="light"
          :content="language"
          placement="bottom"
        >
        <i class="iconfont" :class="iconChange"></i>
        <!-- <span>{{language}}</span> -->
        </el-tooltip>
      </div>
      <div class="welcome">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <span class="w-text">{{$t("welcome")}}：&ensp;{{user}}</span><i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">個人中心</el-dropdown-item>
            <el-dropdown-item command="b">賬号設定</el-dropdown-item>
            <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
            <el-dropdown-item command="d" disabled>雙皮奶</el-dropdown-item>
            <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div>
        <el-tooltip
          effect="light"
          content="退出系統"
          placement="bottom"
        >
        <i class="iconfont icon-tuichu"></i>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      fullscreen: false,
      language: localStorage.getItem('language') == 'en' ? "change to chinese" : '切換為英文', //zh簡體中文,en英文
      user: "張三"
    };
  },
  computed:{
    iconChange(){
      return {
        "icon-yingwen" : this.language == 'change to chinese' ? false : true,
        "icon-zhongwen": this.language == 'change to chinese' ? true : false
      }
    }
  },
  components: {},
  mounted() {},
  methods: {
    handleFullScreen() {
      console.log("點選了放大縮小按鈕");
    },
    handleLanguage() {
      console.log("切換語言");
      console.log("切換前language=",this.language)
      var lang = localStorage.getItem('language')
      if(lang == 'en'){
        this.language = '切換為英文'
        this.$i18n.locale = 'zh'
        localStorage.setItem('language','zh')
      }else{
        this.language = 'change to chinese'
        this.$i18n.locale = 'en'
        localStorage.setItem('language','en')
      }
    },
    handleCommand(command) {
        this.$message('click on item ' + command);
    }
  }
};
</script>

<style scoped>
.header{
    background-color: #242f42;
    position: relative;
    width: 100%;
    height: 70px;
}


.logo{
    width: 70px;
    height: 70px;
    float: left;
    margin-left: 30px;
}
.header-right{
    float: right;
    width: 300px;
    height: 70px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.iconfont{
    color: white;
    font-size: 22px;
}

.logo img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
}

.btn-changelan>span{
    color: white;
    font-size: 18px;
}

.w-text{
    font-size: 14px;
    color: white;
}

.el-dropdown-link {
    cursor: pointer;
    color: white;
  }
  
.el-icon-arrow-down {
    font-size: 12px;
}
</style>

5.在html模闆中使用

在你需要使用中英文切換的地方，文法格式

{{$t(“XX”)}}

這裡的

welcome

就是en.js和zh.js中配置好的字段名

6.最終效果

英文：

在嗎？手把手教vue-cli4+elementUI搭建通用背景管理系統---(二)vue-i18n中英文切換前言一、vue-i18n是什麼？二、使用步驟總結

中文：

在嗎？手把手教vue-cli4+elementUI搭建通用背景管理系統---(二)vue-i18n中英文切換前言一、vue-i18n是什麼？二、使用步驟總結

總結

以上就是今天要講的内容，本文僅僅簡單介紹了vue+elementUI+vue-i18n的使用。

在嗎？手把手教vue-cli4+elementUI搭建通用背景管理系統---(二)vue-i18n中英文切換前言一、vue-i18n是什麼？二、使用步驟總結

文章目錄

前言

一、vue-i18n是什麼？

二、使用步驟

1.安裝vue-i18n

2.添加本地翻譯資訊

3.建立帶有選項的i18n對象和設定預設語言辨別

4.将i18n對象挂載到Vue執行個體

4.處理公共頭部的語言切換事件

5.在html模闆中使用

6.最終效果

總結

繼續閱讀

Vue $emit 子元件向父元件傳遞參數

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條