Vue使用VueI18n国际化

1.安装VueI18n

npm install vue-i18n --save-dev

2.定义好国际化文件
index.js

import hk from './zh-HK'
import cn from './zh-CN'
const messages = {
  hk: {
    message: hk
  },
  cn: {
    message: cn
  }
}
export default messages

zh-CN.js

const message = {
  connected: '已连接'
}
export default message

zh-HK.js

const message = {
  connected: '已鏈接'
}
export default message

3.在main.js中引入VueI18n和message文件

import VueI18n from 'vue-i18n'
import messages from './assets/lang/index'
Vue.use(VueI18n)

const i18n = new VueI18n({
  // 义默认语言
  locale: 'cn',
  messages
})

new Vue({
  router,
  i18n,
  store,
  render: h => h(App)
}).$mount('#app-box')

4.在vue项目中

更改this.$i18n.locale = ‘cn’或者this.$i18n.locale =‘hk’就可以切换语言， 标签中使用
{{ $t("message.connected") }} 可以显示对应的中文，this.$t("message.connected") 可以在js中引用对应的中文。