Vue3 + Element-Plus 实现国际化 I18n

是晓周哦

已于 2025-02-12 02:08:46 修改

阅读量280

点赞数 9

文章标签： vue.js javascript 前端 electron

于 2025-02-12 01:32:39 首次发布

本文链接：https://blog.youkuaiyun.com/ak1527512155/article/details/145582889

版权

前言：本文将vue部署在了electron上，需注意根目录并非为@而是@renderer，仅需替换，不影响其它vue的使用方法

1. 安装依赖

pnpm add vue-i18n element-plus --save

2. 配置目录

src
locales
en.json
zh-cn.json
zh-tw.json
其它语言文件…

i18n
index.ts

三个语言文件：

// zh-cn
{
  "message": {
    "hello": "你好，世界",
    "welcome": "欢迎来到 Vue 3"
  }
}

// zh-tw
{
  "message": {
    "hello": "你好，世界",
    "welcome": "歡迎來到 Vue 3"
  }
}

// en
{
  "message": {
    "hello": "Hello World",
    "welcome": "Welcome to Vue 3"
  }
}