i18n国际化处理

//安装
yarn add [email protected]

//封装引入并暴露
src/lang/index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en',
  messages: {
    // 语言包
    en: {
      F: 'file',
      xxx: 'home'
    },
    zh: {
      F: '文件',
      xxx: '首页'
    }
  }
})

export default i18n


//全局引入并挂载
main.js
import i18n from '@/lang'

new Vue({
  el: '#app',
  ...
  i18n,
  render: (h) => h(App)
})

//使用
xxx.vue
    <h1>{{ $t('xxx') }}</h1>
    <h2>{{ fn() }}</h2>

    <el-button @click="$i18n.locale = 'zh'">切换至中文</el-button>
    <el-button @click="$i18n.locale = 'en'">切换至英文</el-button>

methods: {
    fn() {
      console.log('fn')
    }
  }