在Vue中加入国际化（i18n）中英文功能

1.npm安装方法

npm install vue-i18n --save

2.在src资源文件下创建文件夹i18n，i18n下面创建index.js文件，引入VueI18n和导入语言包（按开发需求可添加多种语言）

具体代码：

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

Vue.use(VueI18n)
 
// 注册i18n实例并引入语言文件
const i18n = new VueI18n({
  locale: 'zh_cn',
  messages: {
    'zh_cn': require('@/assets/languages/zh_cn.json'),
    'en_us': require('@/assets/languages/en_us.json')
  }
})

export default i18n

3.在mian.js文件中：

import i18n from './i18n';

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

4.接在assets文件下新建languages包：

语言JSON包：

//zh_cn.json

{
  "SYS": {
    "confirmButtonText": "确认",
    "cancelButtonText": "取消"
  },
  "user": {
    "title": "个人中心",
    "Exit": "退出系统",
    "Processing": "代办工作",
    "initiated": "我发起的",
    "transferring": "办结工作",
    "phoneService": "电话客服",
    "Accounts": "账号中心",
    "modifyPassword": "修改密码",
    "Language": "切换中英文",
    "about": "关于",
    "confirmExit": "确定退出?",
    "confirmChangeLanguage": "是否切换语言？",
    "ScExit": "退出成功",
    "loadingtext": "退出账号中..."
  }
}

//en_us.json

{
  "SYS": {
    "confirmButtonText": "Comfirm",
    "cancelButtonText": "Cancel"
  },
  "user": {
    "title": "Personal center",
    "Exit": "Exit system",
    "Processing": "to-do list",
    "initiated": "I initiated",
    "transferring": "transferring work",
    "phoneService": "Telephone customer service",
    "Accounts": "Account center",
    "modifyPassword": "change Password",
    "Language": "CH/EN",
    "about": "about",
    "confirmExit":"Confirm Exit ?",
    "confirmChangeLanguage":"Whether to switch languages",
    "ScExit":"exit successfully",
    "loadingtext":"Exiting..."
  }
}

5.组件使用（语言切换）

        <van-cell
          icon="setting-o"
          @click="changeLanguage"
          :title="$t('user.Language')"
          :value="Languagevalue"
          is-link
        />

   展示语言切换弹窗：（注意一定要使用$t()）

    //选择语言
    changeLanguage() {
      this.$dialog
        .confirm({
          message: this.$t("user.confirmChangeLanguage"),
          confirmButtonText: this.$t("SYS.confirmButtonText"),
          cancelButtonText: this.$t("SYS.cancelButtonText")
        })
        .then(() => {
          this.Language = !this.Language;
          if (this.Language == false) {
            this.CHLanguage("zh_cn");
            this.Languagevalue = "English";
          } else {
            this.CHLanguage("en_us");
            this.Languagevalue = "Chinese";
          }
        });
    },
    // 语言切换
    CHLanguage(lang) {
      lang === "" ? "zh_cn" : lang;
      this.$i18n.locale = lang;
    },

 

效果：

 

 

 

转载于:https://www.cnblogs.com/lwming/p/11280943.html