首页 > 其他 > 详细

VueI18n的应用

时间:2018-11-07 10:46:28      阅读:197      评论:0      收藏:0      [点我收藏+]
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";

 

VueI18n的应用

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!