Vue项目i18n国际化语言切换

1.安装依赖

npm install vue-i18n

2.在目录下创建所需文件
——》目录结构

在main.js中引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 国际化
import VueI18n from 'vue-i18n'
import messages from './assets/lang/index'

Vue.use(VueI18n)
Vue.config.productionTip = false

let dateTimeFormats = {
// 放在这里
}
const i18n = new VueI18n({
  dateTimeFormats: dateTimeFormats,
  locale: 'zh', // 语言标识 // this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages
})
new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

index.js

import zh from './zh'
import en from './en'

const messages = {
  en: {
    message: en
  },
  zh: {
    message: zh
  }
}

export default messages

中文 ：src/assets/lang/zh.js

export const message = {
  router: {
    home: '首页',
    name: '中文'
  }

}
export default message

英文 ：src/assets/lang/en.js

 export const message = {
  router: {
    home: 'HHHHHHome',
    name: 'Chinese'
  }
}
export default message

如何使用

<template>
  <div class="home">
    <span>{{$t('message.home')}}</span>
    <span>{{$t('message.name')}}</span>
    <button @click="changLaguages()">切换语言</button>
   </div>
</template>

<script>
export default {
 data () {
    return {
      lang: 'zh'
    }
  },
  methods: {
    changLaguages () {
      console.log(this.$i18n.locale)
      let lang = this.$i18n.locale === 'zh' ? 'en' : 'zh'
      this.$i18n.locale = lang
    }
  }
}
</script>

详情请见 Vue i18n官网