vue-i18n

下載導(dǎo)入項(xiàng)目

npm install vue-i18n --save

【lang/index.js】

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

【main.js】

import i18n from "./lang"

window.$vm = new Vue({
  router,
  i18n,
  render: h => h(App)
}).$mount('#app');

引入語(yǔ)言包

【lang/index.js】

import LangZh from "./language_packs/zh.js"

import LangEn from "./language_packs/en.js"

export default new VueI18n({
    locale: localStorage.getItem('locale') ||  "zh-CN",   //localStorage用來(lái)緩存語(yǔ)言狀態(tài)
    messages: {
        "zh-CN": LangZh,
        "en-US": LangEn
    }
})

使用

1.組件中使用 this.$i18n.locale = "zh-CN" 的方式切換語(yǔ)言
2.模板中使用 {{$t('message.message1')}} 的方式替換需要國(guó)際化的文本
3.組件中使用 this.$t('message.message1') 的方式替換需要國(guó)際化的文本，其中message1則是語(yǔ)言包中寫好的數(shù)據(jù)
【/language_packs/zh.js】

export default {
    message: {
         message1: "hello"
    }
}

項(xiàng)目結(jié)構(gòu)

項(xiàng)目結(jié)構(gòu)