vue多语言插件vue-i18n

2019独角兽企业重金招聘Python工程师标准>>>

1. 安装vue-i18n

npm install vue-i18n

2. 在main.js中引入vue-i18n

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

3. 定义语言文件

const messages = {
  //英文
  en: {
    message: {
      hello: 'hello',
      world: 'world'
    }
  },
  //简体中文
  cn: {
    message: {
      hello: '你好',
      world: '世界'
    }
  },
  // 繁体中文
  tw: {
    message: {
      hello: '妳好',
      world: '世界'
    }
  }

4. vue-i18n初始化

const i18n = new VueI18n({
  locale: 'cn', // 默认语言
  messages
})

5. 将vue-i18n挂载到vue实例上

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

6. 在vue模板文件中使用

<h1>{{ $t("message.hello") }}</h1>

7. 在js中使用

computed:{
    hello(){
       return this.$t("message.hello") + this.$t("message.world");
     } 
},

8. 切换语言

this.$i18n.locale = 'en' // 切换英文

9. 单独定义语言文件，并加载到vue-i18n初始化中

export default {
  message: {
    hello: '你好',
    world: '世界'
  }
}

import cnlang from './lang/cn.js'
const i18n = new VueI18n({
  locale: 'cn', // 默认语言
  messages: {
  	'cn': cnlang
  }
})

转载于:https://my.oschina.net/robin3d/blog/1862763