vue.js 前端 javascript elementui Vue3修改Element-plus语言与项目国际化

修改Element-plus默认语言

Element-plus默认语言是英语，可修改为其它语言；

此处 Element-plus 为自动按需导入方式配置；

更多导入方式：Vue3使用Element-plus-CSDN博客

全局配置默认语言参考：国际化 | Element Plus

统一固定设置

在 App.vue 引入 Element-plus 语言包，并使用 el-config-provider 标签

动态切换（示例）

仅作学习

项目国际化

使用 vue-i18n 模块

安装依赖

npm i vue-i18n

创建文件

在 src 目录下创建 locales 目录，里面创建文件：en.js、zh-cn.js、index.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': {

...zhLocale,

...elZhLocale

}

}

export const getLocale = () => {

// 获取缓存

const storLanguage = localStorage.getItem('language')

// 存在返回当前语言

if (storLanguage) return storLanguage

// 不存在 获取系统语言

const language = (navigator.language || navigator.browserLanguage).toLowerCase()

const locales = Object.keys(messages)

for (const locale of locales) {

if (language.indexOf(locale) > -1) {

return locale

}

}

// 默认返回简体中文

return 'zh-cn'

}

const i18n = createI18n({

globalInjection: true,

legacy: false,

locale: getLocale(),

messages: messages

})

export default i18n

编辑 main.js

挂载 locales/index.js

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

import i18n from '@/locales/index'

const app = createApp(App)

app.use(router)

app.use(i18n)

app.mount('#app')

编辑 App.vue

在 App.vue 使用 el-config-provider 标签配置

创建组件

在 components 创建一个 language.vue 组件

使用组件

在页面 home.vue 使用 language.vue 组件并使用前面配置好的语言；

参考链接

 您阅读本篇文章共花了：