【vue3】【elementPlus】【国际化】

最新推荐文章于 2025-11-11 11:31:00 发布

原创

最新推荐文章于 2025-11-11 11:31:00 发布 · 631 阅读

5 ·

CC 4.0 BY-SA版权

大鹏展翅

文章标签：

#vue.js #前端 #javascript

1.如需从0-1开始，请参考 https://blog.youkuaiyun.com/Timeguys/article/details/140995569

2.使用 vue-i18n 模块：

npm i vue-i18n

3.在 src 目录下创建 locales 目录，里面创建文件：en.js、zh-cn.js、index.js 语言js文件：

// en.js
 
export default {
  login: {
    title: 'Login Form',
    logIn: 'Login',
    username: 'Username',
    password: 'Password'
  }
}

// zh-cn.js
 
export default {
  login: {
    title: '系统登录',
    logIn: '登录',
    username: '账号',
    password: '密码'
  }
}

// index.js
 
import { createI18n } from 'vue-i18n'
import elEnLocale from 'element-plus/es/locale/lang/en'
import elZhLocale from 'element-plus/es/locale/lang/zh-cn'
import enLocale from './en'
import zhLocale from './zh-cn'
 
const messages = {
  en: {
    ...enLocale,
    ...elEnLocale
  },
  'zh-cn': {