记录一下vue如何利用vue-i18n实现实现国际化的经验（中英文切换）

手机端运用vue要做国际化，作为小白，记录一下，有可能使用的不对，拜托请指出来，谢谢，共同进步

步骤一：安装vue-i18n

npm install vue-i18n --save

步骤二：main.js文件的配置，在main.js中添加以下跟vue-i18n的使用有关的配置项

step1， 引入i18n国际化插件

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

step2，注册i18n实例并引入语言文件，

const i18n = new VueI18n({
  locale:'zh',//语言标识，默认为中文
  messages:{
    'zh':require('./common/lang/zh'),
    'en':require('./common/lang/en')
  }
})

step3，将i18n注入到vue实例中

new Vue({
 router,
 store,
  i18n,
 data () {
  return {
   isIOSEnvironment: false,
  }
 }
}).$mount("#weixin")

以上3步是在main.js里操作的，其中zh和en,是两个js文件，我放在了common/lang目录下

en.js里的内容：

module.exports = {
  language: {
    name: 'english'
  },
  navbar: {
    home: 'home',
    introduction: 'introduction',
    contact: 'contact',
    jing_product_name:'jinrongfuwu',
    jing_product_toast_msg:'please wait a minite'

  }
}

zh.js里的内容：

module.exports = {
  language: {
    name: '中文'
  },
  navbar: {
    home: '首页',
    introduction: '简介',
    contact: '联系我们',
    jing_product_name:'金融服务',
    jing_product_toast_msg:'开发中，敬请期待'
  }
}

二者里面的key是一样的。

步骤三：使用vue-i18n，在.vue文件使用：

自定义控件使用：（给title赋值）

<head-top :crossover="title"></head-top>

export default {
  data(){
    return{
      title:this.$t('navbar.jing_product_name'),
    }
  },

}

普通使用：

<p class="title">{{ $t('navbar.introduction')}}</p>

Toast使用：

Toast({
  // mes: "开发中，敬请期待"
  mes: this.$t('navbar.jing_product_toast_msg')
})

placeholder使用：

<input type="text" class="edit" maxlength="50" v-model="description" 
:placeholder=" $t('navbar.company_name')" >

切换中英文方法：

beforeCreate: function(){
this.$i18n.locale = this.$route.query.language; }在beforeCreate 方法里进行切换，根据原生传来的参数进行判断，因为，beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载

具体原因可以看这里的vue生命周期：https://segmentfault.com/a/1190000008010666 ，这里介绍的很详。

记录一下vue如何利用vue-i18n实现实现国际化的经验（中英文切换）

猜你喜欢