vue3＋vant4结合（vue-i18n）实现国际化语言切换

CCDD、李阿林

已于 2023-07-23 12:28:29 修改

阅读量1.3k

点赞数

文章标签： vue.js javascript 前端

于 2023-07-23 12:27:12 首次发布

本文链接：https://blog.csdn.net/qq_44649801/article/details/131878128

版权

本文介绍了如何在Vue3和Vant4项目中结合vue-i18n实现国际化功能。步骤包括安装i18n、配置多语言文件、将i18n挂载到Vue中以及在页面中使用和切换语言的方法。通过$t属性和setup语法，可以方便地在各页面中调用和切换不同语言。

摘要由CSDN通过智能技术生成

1.先安装i18n

npm install vue-i18n

2.配置多语言文件

先进行国际化配置在src下创建一个lang文件夹并在其中创建index.js、zh.js、en.js文件(若为TS，更改文件后缀即可)

自定义语言格式

export default {
  object: {
    key1: "value1",
    key2: "value2",
    key3: "value3"
  }
}

index.js中配置如下

// vue-i18n所需要引入的
import { createI18n } from 'vue-i18n'
// 本地的文件夹
import enLocale from './en'
import zhLocale from './zh'
// vant所需要引入的
import { Locale } from 'vant'
//vant中的文件夹  需要的语言和本地的语言保持一致
import enUS from 'vant/lib/locale/lang/en-US'
import zhCN from 'vant/lib/locale/lang/zh-CN'
const messages = {
  en: {
    ...enUS,
    ...enLocale
  },
  zh: {
    ...zhCN,
    ...zhLocale
  },
}
// 更新vant组件库本身的语言变化，支持国际化
function vantLocales (lang) {
  if (lang === 'en') {
    L