Vue 使用i18n做到国际化

前言

---

在之前的大数据可视化项目和最近的后台管理项目，都用到了国际化，所以在这里记录下来，以方便后续的维护使用。

Step 一 安装i18n

npm install vue-i18n --save-dev

Step 二 将i18n引入vue实例 在main.js中配置

import vueI18n from 'vue-i18n'

Vue.use(vueI18n);

const i18n = new vueI18n({
    locale: window.sessionStorage.getItem('lang') || 'zh-CN', // 语言标识
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
        'zh-CN': require('./components/utils/zh'), // 中文语言包
        'en-US': require('./components/utils/en') // 英文语言包
    }
});
    new Vue({
        el: '#app',
        router,
        i18n,   //挂在实例，
        store,
        // axios,
        components: {
            App
        },
        template: '<App/>',
        methods: {

        }
    })

如果你是按需加载的element-ui请看下边的配置，这样的话可以做到element-ui的国际化，如果你是全部加载
那么直接看官网的解说
下边的都是在main.js里边配置 其他的配置同上

import lang_en from 'element-ui/lib/locale/lang/en'
import lang_zh from 'element-ui/lib/locale/lang/zh-CN' 
import el_locale from 'element-ui/lib/locale'
const messages = {
    'en-US': {
      ...require('./components/utils/en'),
      ...lang_en
    },
    'zh-CN': {
      ...require('./components/utils/zh'),
      ...lang_zh
    }
  }


  const i18n = new vueI18n({
    locale: window.sessionStorage.getItem('lang') || 'zh-CN', // 语言标识
    messages,
});
el_locale.i18n((key, value) => i18n.t(key, value))

Step 三 新建两个js文件，一个存放中文的，一个存放英文的。

zh.js

export const language = {
    // 头部导航栏
    headerNav: {
        PlatformOperation: "平台运营后台", //Platform operation background
    },
    // 登录
    login: {
        logout: '退出', //logout
        Lanugages: '中英文切换', //Lanugages
        platformSystem: '平台运营管理系统', //Platform operation management system
        greeting: 'BUYDO让买的更便宜,卖的更贵！', //BUYDO makes people buy cheaper and sell more expensive!
       }
}

en.js

export const language = {
    headerNav: {
        PlatformOperation: 'Buydo Management System'
    },
    // 登录
    login: {
        logout: 'Logout',
        Lanugages: 'Language',
        chinese: 'Chinese',
        english: 'English',
        platformSystem: 'Buydo Management System',
       }
}

Step 四 在你需要的地方触发切换local的值

      <el-dropdown @command="handleLang" trigger="click">
          <span class="el-dropdown-link">
            {{$t('language.login.Lanugages')}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="chinese">{{$t('language.login.chinese')}}</el-dropdown-item>
            <el-dropdown-item command="english">{{$t('language.login.english')}}</el-dropdown-item>
            <!-- <el-dropdown-item command="english">日语</el-dropdown-item> -->
          </el-dropdown-menu>
        </el-dropdown>
  methods: {
    //切换语言
    handleLang(command) {
      if (command == "chinese") {
        this.$i18n.locale = "zh-CN";
        this.$elementMessage("中文");
      }
      if (command == "english") {
        this.$i18n.locale = "en-US";
        this.$elementMessage("英文");
      }
      window.sessionStorage.setItem("lang", this.$i18n.locale);
      this.getLevel();   //这是调用切换语言的接口，因为后台也需要国际化
    },
}

Step 五 vue - i18n 数据渲染的模板语法

//组件内的模板
     <div class="content">
          {{$t('language.login.platformSystem')}}
        </div>


// 动态绑定在vue
          <el-input  :placeholder="$t('language.system.enterClassName')"
                    v-model="productCategoryAddReqVo.name" ></el-input>



//在vue.js data 中赋值

<script>
export default {
  name: "App",
  data() {
    return {
      isRouterAlive: this.$t('language.system.enterClassName')
    };
  },

};
</script>

结束语

到此项目的国际化就告一段落了。在这里记录一下，方便后续使用以及学习。