文档使用：https://kazupon.github.io/vue-i18n/zh/guide/formatting.html#%E5%85%B7%E5%90%8D%E6%A0%BC%E5%BC%8F
# 首先我们在项目中安装vue-i18n依赖包：
npm install vue-i18n --save 
创建语言包（来自你项目中的所有文案），i18n实例，并在main.js文件中引入：
文件目录结构
|-- main.js 导入文件
|-- i18n
  |-- index.js 创建实例对象
  |-- locale 各种语言包
    |-- en.js  英文包
    |-- zh.js  中文包
# zh.js
module.exports = {
    loginPage: {
        login: '登录999999',
        register: '注册',
        homeOverview:'首页概览',
        firmOverview:'公司概述',
        firmReports:'财务报表',
        firmAppendix:'更多附录',
        firmIndex:'主要财务指标',
        firmAnalysis:'对比分析',
        firmNews:'新闻事件档案',
        firmOther:'其他功能',
    }
}
# en.js
module.exports = {
    loginPage: {
        login: 'login',
        register: 'regiter',
        homeOverview:'Home overview',
        firmOverview:'firmOverview',
        firmReports:'firmReports',
        firmAppendix:'firmAppendix',
        firmIndex:'firmIndex',
        firmAnalysis:'firmAnalysis',
        firmNews:'firmNews',
        firmOther:'firmOther'
        
    }
  }
# i18n/index.js 创建i18n实例对象，代码如下
import Vue from 'vue'
import VueI18n  from 'vue-i18n'
import zh from './zh'
import en from './en'
Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: 'zh-CN',    // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale 
    messages: {
      'zh-CN': zh,   // 中文语言包
      'en-US': en    // 英文语言包
    }
})
export default i18n;

# 在main.js文件中引入i18n实例并挂载到Vue实例上即可：
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import i18n from './i18n/index';

new Vue({
    i18n,  // 挂载到Vue实例之上
    router,
    store,
    render: (h) => h(App),
}).$mount("#app");
# 实现语言切换组件，代码如下：
  <template>
    <div>
        <div class="top_btn" @click="changeLangEvent">中文</div>
         <div>{{$t('loginPage.login')}}</div>
    </div>
</template>
<script>
export default {
    methods: {
        changeLangEvent() {
              if ( this.$i18n.locale === 'zh-CN' ) {
                    this.$i18n.locale = 'en-US';//关键语句
                    console.log('en-US')
                }else {
                    this.$i18n.locale = 'zh-CN';//关键语句
                    console.log('zh-CN')
                }
                this.$message({
                    type: 'info',
                    message:'已切换'
                });
        }
    } 
}
</script>
# 模板渲染
静态渲染： {{$t('xx .xxx')}}
<span v-text="$t('lang .homeOverview')"></span>
<span>{{$t('lang .homeOverview')}}</span>
uI组件中使用：
比如：label="用户姓名" 就改成 :label="$t('order.userName')"
动态渲染：
<span class="el-dropdown-link">{{navCompany}}</span>
 computed:{
      navCompany:function(){
        if(this.nav_company){
          let str = 'lang'+this.nav_company; //拼接返回使用
          return this.$t(str);
        }
      }
},
@原文章地址：https://segmentfault.com/a/1190000014229902