vue-i18n + element-ui实现国际化教程（中英文切换）

最新推荐文章于 2025-03-04 16:56:47 发布

Flowering_Vivian

最新推荐文章于 2025-03-04 16:56:47 发布

阅读量2.6k

点赞数 1

分类专栏：前端技术教程文章标签： vue elementui

本文链接：https://blog.csdn.net/Flowering_Vivian/article/details/109580289

版权

1. 安装 vue-i18n依赖包

首先在自己的项目中安装 vue-i18n依赖包

npm install vue-i18n --save-dev

lang目录：

lang > index.js
lang > en.js
lang > zh.js

index.js代码如下：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enLocale from './en'
import zhLocale from './zh'
import elementEnLocale from 'element-ui/lib/locale/lang/en'
import elementZHLocale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(VueI18n)

const i18n = new VueI18n({
   
	locale: 'zh',  //默认语言
	messages: {
   
		en: {
   
			...enLocale,
			...elementEnLocale
		},
		zh: {
   
			...zhLocale,
			...elementZHLocale
		}
	}
})
export default i18n

en.js是英文语言包文件

export default {
   
	login: {
   
		login_1: 'Username',
		login_2: 'Password',
		login_3: 'Please input a user name',
		login_4: 'Please input a password',
		login_5: 'Sign In',
		login_6: 'Success',
	},
	register: {
   
		register_9: 'Mobile',
		register_11: 'Mobile verification code',
		register_13