VueI18n的应用

时间:2018-11-07 10:46:28   收藏:0   阅读:198
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";

 

原文:https://www.cnblogs.com/huanhuan55/p/9920601.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!