使用vue进行国际化

Posted 2021-01-20 zhouyideboke

相对于网站等一些需求 我们有需要做国际化的需求，具体步骤如下：

首先安装 vue-i18n

npm install vue-i18n

import VueI18n from ‘vue-i18n‘

Vue.use(VueI18n) // 通过插件的形式挂载

const i18n = new VueI18n({
    locale: ‘zh-CN‘,    // 语言标识
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
      ‘zh-CN‘: require(‘./common/lang/zh‘),   // 中文语言包
      ‘en-US‘: require(‘./common/lang/en‘)    // 英文语言包
    }
})

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  i18n,  // 不要忘记
  store,
  router,
  template: ‘<App/>‘,
  components: { App }
})

上面的代码正式将 vue-i18n 引入 vue 项目中，创建一个 i18n 实例对象，方便全局调用。我们通过 this.$i18n.locale 来进行语言的切换

需要两个 js 文件，通过 require 的形式引入到 main.js。

en.js 英文语言包：

export const m = {
music: ‘Music‘,//网易云音乐
findMusic: ‘FIND MUSIC‘,//发现音乐
myMusic: ‘MY MUSIC‘,//我的音乐
friend: ‘FRIEND‘,//朋友
musician: ‘MUSICIAN‘,//音乐人
download: ‘DOWNLOAD‘//下载客户端
}
zh.js中文语言包：

export const m = { music: ‘网易云音乐‘, findMusic: ‘发现音乐‘, myMusic: ‘我的音乐‘, friend: ‘朋友‘, musician: ‘音乐人‘, download: ‘下载客户端‘ }

组件中如何去切换 locale 的值，实现语言切换。

locale: ‘zh-CN‘, // 语言标识
messages: {
‘zh-CN‘: require(‘./common/lang/zh‘), // 中文语言包
‘en-US‘: require(‘./common/lang/en‘) // 英文语言包
}
---------------------

 
 changeLangEvent() {
   this.$confirm(‘确定切换语言吗?‘, ‘提示‘, {
       confirmButtonText: ‘确定‘,
       cancelButtonText: ‘取消‘,
       type: ‘warning‘
    }).then(() => {
       if ( this.lang === ‘zh-CN‘ ) {
          this.lang = ‘en-US‘;
          this.$i18n.locale = this.lang;//关键语句
       }else {
          this.lang = ‘zh-CN‘;
          this.$i18n.locale = this.lang;//关键语句
       }
    }).catch(() => {
       this.$message({
           type: ‘info‘,
       });          
    });

这边的重点就是，点出的‘’关键语句‘’：this.$i18n.locale,当你赋值为‘zh-CN’时，导航栏就变成中文；当赋值为 ‘en-US’时，就变成英文。

vue-i18n 数据渲染的模板语法
我们知道 vue 中对于文字数据的渲染，有以‘’{{}}‘’或者 v-text、v-html等的形式，同样的使用国际化后，依旧可以沿用，但需要一点修改。
v-text:

<span v-text="$t(‘m.music‘)"></span>

{{}}:

<span>{{$t(‘m.music‘)}}</span>