vue-i18n

下载导入项目

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');

引入语言包

【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用来缓存语言状态
    messages: {
        "zh-CN": LangZh,
        "en-US": LangEn
    }
})

使用

1.组件中使用 this.$i18n.locale = "zh-CN" 的方式切换语言
2.模板中使用 {{$t('message.message1')}} 的方式替换需要国际化的文本
3.组件中使用 this.$t('message.message1') 的方式替换需要国际化的文本，其中message1则是语言包中写好的数据
【/language_packs/zh.js】

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

项目结构