vue项目的国际化实现方案

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.importVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'importstorefrom'./store'// 引入国际化插件importVueI18nfrom'vue-i18n'Vue.use(VueI18n) // 通过插件的形式挂载consti18n=newVueI18n({
locale: 'zh-CN', // 语言标识// this.$i18n.locale // 通过切换locale的值来实现语言切换messages: {
'zh-CN': require('./locales/zh'), // 中文语言包'en-US': require('./locales/en') // 英文语言包  }
})
/* eslint-disable no-new */// 把vue实例挂载在window.vm,方便使用vue的实例window.vm=newVue({
el: '#app',
router,
store,
i18n, // 国际化components: {
App  },
template: '<App/>'})

exportconstlang= {
Home: {
'title': '首页',
'submit': '提交'  },
Mall: {
'shoppingCart': '购物车',
'detail': '详情'  }
}

exportconstlang= {
Home: {
'title': 'Home',
'submit': 'Submit'  },
Mall: {
'shoppingCart': 'ShoppingCart',
'detail': 'Detail'  }
}

<template><divclass="hello"><div>{{$t('lang.Home.submit')}}</div><div@click="switchLangCh">切换中文</div><div@click="switchLangEn">切换英文</div></div></template><script>exportdefault {
name: 'I18nTest',
components: {
  },
data () {
return {
value: 'Welcome to Your Vue.js App'    }
  },
created () {
  },
methods: {
switchLangCh () {
this.$i18n.locale='zh-CN'// 切换成中文    },
switchLangEn () {
this.$i18n.locale='en-US'// 切换成英文    }
  }
}
</script><stylelang="less"scoped></style>

<template><divid="app"><!--<keep-alive>--><router-view/><!--</keep-alive> --></div></template><script>exportdefault {
name: 'App',
created () {
this.switchI18n()
  },
methods: {
switchI18n () {
// 判断当前环境是中文还是英文constnowLang=navigator.language||navigator.browserLanguageif (nowLang.indexOf('zh') >-1) {
this.$i18n.locale='zh-CN'// 切换国际化成中文      } else {
this.$i18n.locale='en-US'// 切换国际化成英文      }
    },
  }
}
</script><style></style>