vue-i18n安裝，$t的用法

1、在 main.js 中引入 vue-i18n （前提是要先引入 vue）

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

 

2、准備本地的翻譯信息

const messages = {
  zh: {
    message: {
      hello:'好好學習，天天向上！'
    }
  },
  en: {
    message: {
      hello:'good good study, day day up!'
    }
  }
}

 

3、創建帶有選項的 VueI18n 實例

const i18n = new VueI18n({
  locale:'en',// 語言標識
  messages
})

 

4、把 i18n 掛載到 vue 根實例上

const app =new Vue({
   router,
   i18n,
   ...App
}).$mount('#app')

 

5、html寫入

 

使用$t方法實現國際化

<span>{{ $t('header.HeadMenu.logout') }}</span>

或者用v-text

<span v-text="$t('header.HeadMenu.logout')"></span>