第一步下载依赖

npm install vue-i18n

第二步在src目录下新建lang文件夹，然后在目录下新建index.js,zh.js,en.js三个文件

第三步在index.js下写入

// 引入vue
import Vue from 'vue'
// 引入vue-i18n插件
import vuei18n from "vue-i18n"
// 挂载Vue实例 
Vue.use(vuei18n)
// 导入zh.js中文语言包    
import zh from "./zh"  
// 导入en.js英文语言包           
import en from "./en"
// 配置vuei18n
const i18n = new vuei18n({
    // 获取浏览器语言环境设置默认语言
    locale: navigator.language === "en" ? "en" : "zh",
    // 语言文件导入
    messages: {
        en: {
            ...en,  //使用ES6扩展运算符解构en
        },
        zh: {
            ...zh,
        },
    },
})
// 抛出
export default i18n;

如果引入出现以下问题大概率是因为版本问题降低版本即可，奉上大佬解决问题截图
原文地址 @接口写好了吗

第四步在zh.js和en.js文件下写入

第五步在main.js引入

最后一步使用

<template>
  <div>
   <!-- $t("login.lang") ，$t("你的变量") -->
    <h1>
      <span style="background: red">当前语言环境</span> {{ $t("login.lang") }}
    </h1>
    <button @click="langClick('zh')">切换中文语言环境</button>
    <button @click="langClick('en')">切换英文语言环境</button>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  nameL: "VueStyle",
  data() {
    return {
      
    };
  },
  created() {
    console.log(navigator.language, "当前浏览器默认语言");
  },
  methods: {
    // 语言切换回调
    langClick(lang){
      // vue-i18n依赖语言切换api
      this.$i18n.locale = lang;
    },
  },
};
</script>

END！！！