i18n国际化处理

//安装
yarn add vue-i18n@8.0.0
 
//封装引入并暴露
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')
    }
  }

__EOF__

本文作者：Sternstunde
本文链接：https://www.cnblogs.com/strundent/p/16883438.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！