码迷,mamicode.com
首页 > 其他好文 > 详细

VueI18n的应用

时间:2018-11-07 11:32:29      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:one   imp   text   temp   conf   ali   component   local   lse   

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的应用

标签:one   imp   text   temp   conf   ali   component   local   lse   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!