Fork me on GitHub

VueI18n的应用

1.npm install vue-i18n
2.在 main.js 中引入 vue-i18n 
   import VueI18n from 'vue-i18n'
   Vue.use(VueI18n)
3.在main.js中准备翻译
   const messages = {
    zh: {
      message: {
        name:'李四'
      }
    },
    en: {
      message: {
        name:'lisi'
      }
    }
}

4.创建带有选项的 VueI18n 实例
 const i18n = new VueI18n({
  locale: localStorage.getItem("language"), // 语言标识
  messages
})

5.把 i18n 挂载到 vue 根实例上
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  i18n,
  template: '<App/>',
  components: {
    App
  }

6.在 HTML 模板中使用
<div id="app">
    <h1 style="font-size: 16px; text-align: center;">{{ $t("message.hello") }}</h1>
  </div>
})

7.切换语言; this.$i18n.locale = "en";

 

posted @ 2018-11-07 09:18  欢欢11  阅读(202)  评论(0编辑  收藏  举报