vue3使用vue-i18n实现国际化

Q_Q 忙里偷闲

已于 2024-05-22 16:59:51 修改

阅读量3.8k

点赞数 28

分类专栏： # vue2&vue3 常用示例专栏文章标签： vue.js javascript 前端 vue-i18n 国际化

于 2024-04-01 17:31:52 首次发布

本文链接：https://blog.csdn.net/qq_36410795/article/details/137239189

版权

本文详细介绍了如何在Vue3项目中安装并配置vue-i18n，创建多语言文件，注册i18n实例，以及在组件和JavaScript中使用国际化。同时涵盖了如何通过改变locale.value实现语言切换，以及处理ref中国际化值未生效的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 安装 `vue-i18n`

cnpm i --save vue-i18n

2. 创建文件存储翻译的语言

在 src/lang/en.json 中

export default {
   
  login: 'login'
};

在 src/lang/zh.json 中

export default {
   
  login: '登录'
};

3. 注册i18n实例

在 src/lang/index.ts 中

import {
    createI18n } from "vue-i18n";
import zh from "./zh.json";
import en from "./en.json";
import vantZhCN from 'vant/lib/locale/lang/zh-CN';//vant组件库的国际化中文
import vantEnUS from 'vant/lib/locale/lang/en-US';//vant组件库的国际化英文
import {
    localStorage } from "@/utils/local-storage";

const i18n: any = createI18n({
   
  locale: localStorage.get("lang") || "zh",
  legacy: false,
  globalInjection: true,
  messages: {
   
    zh: {
   
      ...zh,
      ...vantZhCN
    },
    en: