用vue-i18n实现中英文切换国际化

安装

• npm install vue-i18n

目录结构

i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zh from './langs/zh'
import en from './langs/en'

Vue.use(VueI18n)

const messages = {
  zh,
  en
}

const i18n = new VueI18n({
  locale: localStorage.getItem('locale') || 'zh', // 语言标识
  messages
})

export default i18n

zh.js

export default {
  message: {
    title: 'chinese'
  }
}

en.js

module.exports = {
  message: {
    title: 'english'
  }
}

main.js中导入

import Vue from 'vue'
import App from './App'
import router from './router'

import i18n from './i18n/i18n.js' // 第一步

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  i18n, // 第二步
  components: { App },
  template: '<App/>'
})

使用

<template>
  <div>
    <h1>{{ $t("message.title") }}</h1>
    <button @click="handleClick">点击切换语言</button>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  methods: {
    handleClick () {
      this.$i18n.locale = (this.$i18n.locale === 'zh' ? 'en' : 'zh')
      localStorage.setItem('locale', this.$i18n.locale)
    }
  }
}
</script>

效果