Vue中通过“i18n”构建多语言

第一步：根文件下创建“i18n”文件夹

1. 新增文件>>>index.js
2. 新增文件夹>>>locale
3. 新增语言文件>>>locale/zh_CN.js
4. 新增语言文件>>>locale/en_US.js

结构如图:

index.js文件【这个文件中语言的控制读取Cookie配置项,同时集成了Cookie切换方法】

import Vue from "vue";
import VueCookies from 'vue-cookies'
import VueI18n from "vue-i18n";
Vue.use(VueI18n);

/**
* @作者:时光不负所望
* @备注:默认语言
**/
const defaultLanguage = 'zh-CN';

/**
* @作者:时光不负所望
* @备注:以下为语言包单独设置的场景，单独设置时语言包需单独引入
**/
const messages = {
    'zh-CN': require('./locale/zh_CN'),   // 中文语言包
    'en-US': require('./locale/en_US')    // 英文语言包
};

/**
* @作者:时光不负所望
* @备注:获取语言配置-Cookie/如果为空使用默认值替换
* @参数:
* @回执:
**/
function GetLanguageCookieValue() {
    let _language = defaultLanguage;
    let _cookie = VueCookies.get('language');
    if (_cookie == undefined || _cookie == '' || _cookie == null) {
        _language = defaultLanguage;
    } else {
        _language = _cookie;
    }
    return _language;
}

export default new VueI18n({
    locale: GetLanguageCookieValue(),    // 语言标识
    fallbackLocale: defaultLanguage,//没有英文的时候默认语言
    silentFallbackWarn: true,//抑制警告
    messages: messages
});

/**
* @作者:时光不负所望
* @备注:设置中文语言包-Cookie
* @参数:
* @回执:
**/
Vue.prototype.$SetLanguageZH = function () {
    VueCookies.set('language', 'zh-CN');
    this.$i18n.locale=GetLanguageCookieValue();
}

/**
* @作者:时光不负所望
* @备注:设置英文语言包-Cookie
* @参数:
* @回执:
**/
Vue.prototype.$SetLanguageEN = function () {
    VueCookies.set('language', 'en-US');
    this.$i18n.locale=GetLanguageCookieValue();
}

/**
* @作者:时光不负所望
* @备注:获取当前所设置的语言-Cookie
* @参数:
* @回执:
**/
Vue.prototype.$GetLanguageCookieValue= GetLanguageCookieValue;

zh_CN.js文件

module.exports = {
    "Hello":"你好",
    }

en_US.js文件

module.exports = {
    "Hello":"Hello",
    }

第二步：main.js文件中引入“i18n”

import Vue from 'vue';
import App from './App';

//引入多语言支持
import i18n from "@/i18n";

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

第三步:语言切换装置
【在语言切换页面上创建切换方法】

<template>
  <main>
    <ul>
      <li :class="language == 'zh-CN' ? 'on' : ''" @click="Action_ChangeLanguage('zh-CN')" >
        中文
      </li>
      <li :class="language == 'en-US' ? 'on' : ''" @click="Action_ChangeLanguage('en-US')" >
        English
      </li>
    </ul>
  </main>
</template>

<script>
export default {
  name: "Language",
  components: {},
  data() {
    return {
      language: this.$GetLanguageCookieValue(),
    };
  },
  created() {},
  methods: {
    Action_ChangeLanguage(value) {
      this.language = value;

      if (value == "zh-CN") {
        this.$SetLanguageZH();
      } else if (value == "en-US") {
        this.$SetLanguageEN();
      }
    },
  },
};
</script>

效果如下：

第四步：在 Vue 和 JS 下对 “i18n” 的使用
1.Vue页面上

<div>{{$t('Hello')}}</div>



export default {
  name: "Test",
  components: {},
  data() {
    return {
    };
  },
  created() {},
  methods: {
    Action_TestLanguage() {
    	console.log(this.$GetLanguageCookieValue())
    	console.log(this.$t('Hello'))
    },
  },
};
</script>

2.JS页面上【例如外部新建的JS文件】

export function GetLanguageFromTest() {
    console.log(this.$i18n.t('Hello'))
}

至此，所有通过“i18n”构建多语言的准备工作全部处理完成！