1、下载包

npm install vue-i18n

vue-i18n安装说明

2、配置main.js文件

import Vue from 'vue'
import App from './App.vue'
// 引入vue-i18n包
import VueI18n from 'vue-i18n'
// 引入语言文件（需要对哪些内容进行翻译就在文件中写入哪些内容）
import zh from './i18n/zh'
import en from './i18n/en'
// 应用vuei18n
Vue.use(VueI18n)
// 创建vuei18n实例（两个配置项:locale，messages）
const i18n = new VueI18n({
    locale: localStorage.getItem('lang') || 'zh',
    // 配置语言文件对象
    messages: {
        'zh': zh,
        'en': en
    }
})
Vue.config.productionTip = false
// 添加到Vue实例
new Vue({
    i18n,
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    },
}).$mount('#app')

3、组件中使用

<template>
    <div>
        <!--要注意：对需要进行语言切换的地方要使用$t('语言文件对应字段')来插入-->
        <button @click="clearAll">{{$t('nav.del')}}</button>
        <button @click="changeLang">切换语言</button>
    </div>
</template>

<script>
export default {
  methods:{
    // 语言切换（中/英）
    changeLang(){
      let lang=this.$i18n.locale==='zh'?'en':'zh'
      this.$i18n.locale=lang
    }
  }
}
</script>

4、语言文件

// en.js
export default {
    nav: {
        del: 'delete'
    },
    confirm: {
        ok: 'Agree', //确认
        cancel: 'Cancel', //取消
        content: 'Are you sure you want to quit the system?', //你确认要退出系统吗
        logout: 'Logout' //退出
    }
}

// zh.js
export default {
    nav: {
        del: '删除'
    }
}

5、切换

当点击切换语言的按钮后，就会查询当前语言类型并取反

页面中使用的文本通过$t()包裹，会根据内容去切换后的语言类型对应的语言文件中查找该字段

继而实现内容切换

6、注意事项

我使用的Vue2版本，但是下载到的vue-i18n不能适用，最后又卸载掉了，下载的7.3.3版本适用

npm install vue-i18n@7.3.3