vue3＋vant4实现国际化语言切换以及解决Not available in legacy mode 报错问题

1.首先安装vue-i18n

npm install vue-i18n

2.先进行国际化配置在src下创建一个lang文件夹并在其中创建index.js、zh_cn.js、en_us.js、zh_hk.js文件
在index.js中配置如下：

// vue-i18n所需要引入的
import { createI18n } from 'vue-i18n'
// 本地的文件夹
import enLocale from './en_us'
import zhLocale from './zh_cn'
import zhhkLocale from './zh_hk'
// vant所需要引入的
import { Locale } from 'vant'
//vant中的文件夹  需要的语言和本地的语言保持一致
import enUS from 'vant/lib/locale/lang/en-US'
import zhCN from 'vant/lib/locale/lang/zh-CN'
import zhHK from 'vant/lib/locale/lang/zh-HK'
const messages = {
  en: {
    ...enUS,
    ...enLocale
  },
  zh: {
    ...zhCN,
    ...zhLocale
  },
  zhhk: {
    ...zhHK,
    ...zhhkLocale
  }
}
// 更新vant组件库本身的语言变化，支持国际化
function vantLocales (lang) {
  if (lang === 'en') {
    Locale.use(lang, enUS)
  } else if (lang === 'zh') {
    Locale.use(lang, zhCN)
  } else if (lang === 'zhhk') {
    Locale.use(lang, zhHK)
  }
}
// 获取浏览器的语言
const lang = (navigator.language || 'en').toLocaleLowerCase() 
const language = localStorage.getItem('language') || lang.split('-')[0] || 'zh';
localStorage.setItem('language', language)
const i18n = createI18n({
  //Not available in legacy mode 解决报错问题的配置项！！！
  legacy: false,
  // 全局注册 $t方法
  globalInjection: true, 
  //设置初始化语言
  locale: language, 
  // 设置备用语言
  fallbackLocale: 'en', 
  messages, 
})
export {i18n, vantLocales}

3.在main.js中配置如下

import { createApp } from "vue";
import App from "./App.vue";
//引入上面配置好的语言文件
import {i18n, vantLocales} from './lang'
//对vant组件进行初始化语言设置
vantLocales(i18n.locale)
let app = createApp(App);
app.use(i18n).mount("#app");

4.在页面中使用

 
{{$t('app.hello')}}

 5.切换语言的组件

然后是体力活，把内容都换成动态的语言。

整个过程都比较好理解，其中 一到页面就报错这个就整懵了Not available in legacy mode，记得要把 legacy: false,设置好就解决了，希望看到的你，对你有所帮助，嘻嘻嘻