欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue 使用i18n做到国际化

程序员文章站 2022-05-16 09:34:24
...

前言


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

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文件,一个存放中文的,一个存放英文的。

Vue 使用i18n做到国际化

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>

结束语

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