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.在页面中使用

 <div>{{$t('app.hello')}}</div>

 5.切换语言的组件

<template>
    <div>
        <van-field v-model="result" is-link readonly name="picker" label="语言切换" placeholder="点击选择语言"
            @click="showPicker = true" />
        <van-popup v-model:show="showPicker" position="bottom">
            <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
        </van-popup>
    </div>
</template>
  
<script setup>
import { ref } from 'vue';
import { vantLocales } from '@/lang';
import { useI18n } from 'vue-i18n'
const { locale } = useI18n();
const result = ref('');
const showPicker = ref(false);
const columns = [
    { text: '简体中文', value: 'zh' },
    { text: '繁體中文（港）', value: 'zhhk' },
    { text: 'English', value: 'en' },
];
const onConfirm = ({ selectedOptions }) => {
    let lang = selectedOptions[0]?.value
    //切换vant组件语言
    vantLocales(lang)
    //切换页面中的语言
    locale.value = lang;
    localStorage.setItem("language", lang)
    result.value = selectedOptions[0]?.text;
    showPicker.value = false;
};
</script>
<style lang="less" scoped></style>

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

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