3.Vue2结合element-ui实现国际化多语言i18n

1.安装vue-i18n

bash 复制代码
npm install vue-i18n@8.2.1

说明:Vue2使用vue-i18n是8.x,Vue3使用的版本是9.x以上,使用错了会导致报错

2.创建多语言文件

在src/下创建src/lang/langs/zh.js和src/lang/langs/en.js两个文件,里面内容如下:

src/lang/langs/zh.js

bash 复制代码
export const zh = {
    'common': {
        'button': {
            'search': '搜索'
        }
}

export default zh

src/lang/langs/en.js

bash 复制代码
export const en = {
    'common': {
        'button': {
            'search': 'Search'
        }
}

export default en

3.创建i18n

在在src/下创建src/lang/i18n.js文件,如下:

javascript 复制代码
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zh from './langs/zh'
import en from './langs/en'

Vue.use(VueI18n)

const messages = {
  en: en,
  zh: zh
}

const i18n = new VueI18n({
  locale: 'zh',
  messages,
  globalInjection: true
})

export default i18n

4.引入i18n

在main.js中加入下面代码

javascript 复制代码
import i18n from './lang/i18n'

new Vue({
  i18n,
  render: h => h(App)
})

5.在组件中使用

5.1.Html中使用

html 复制代码
<div>{{ $t('common.button.search') }}</div>

5.2.在html作为变量使用

html 复制代码
<input :placeholder="$t('common.button.search')"/>

5.3.在props使用

javascript 复制代码
export default {
	props: {
		name: String,
		default() {
			return this.$t('common.button.search')
		}
	}
}

5.4.在script的方法使用

javascript 复制代码
this.$t('common.button.search')

6.Element-UI使用i18n

6.1.引入element-ui的多语言

在src/lang/i18n.js文件内添加

javascript 复制代码
import elementEN from 'element-ui/lib/locale/lang/en'
import elementZH from 'element-ui/lib/locale/lang/zh-CN'

const messages = {
  en: {
    ...en,
    ...elementEN
  },
  zh: {
    ...zh,
    ...elementZH
  }
}

6.2.引用element-ui的多语言

在src/main.js中添加

javascript 复制代码
Vue.use(Element, {
  size: Cookies.get('size') || 'small',
  i18n: (key, value) => i18n.t(key, value)
})

7.实时切换多语言

在切换多语言的时候,调用下面方法

javascript 复制代码
changeLang(lang) {
  this.$i18n.locale = lang
  localStorage.setItem('el_local_lang', lang)
}

并且在src/lang/i18n.js文件中,优先从localStorage获取当前语言

javascript 复制代码
const i18n = new VueI18n({
  locale: localStorage.getItem('el_local_lang') ? localStorage.getItem('el_local_lang') : 'zh',
  messages,
  globalInjection: true
})
相关推荐
蜚鸣3 天前
Vue的快速入门
vue
吃饭最爱4 天前
⽹络请求Axios的概念和作用
vue
魂尾ac4 天前
Django + Vue3 前后端分离技术实现自动化测试平台从零到有系列 <第一章> 之 注册登录实现
后端·python·django·vue
是罐装可乐4 天前
深入理解 Vue3 Router:三种路由模式的工作原理与实战应用
架构·vue·路由·history·hash·ssr·router
老华带你飞4 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
zhz52145 天前
Spring Boot + Redis 缓存性能优化实战:从5秒到毫秒级的性能提升
java·spring boot·redis·缓存·vue
小胖墩有点瘦6 天前
【基于协同过滤的校园二手交易平台】
java·vue·毕业设计·springboot·计算机毕业设计·协同过滤·校园二手交易平台
小圣贤君6 天前
小说创作中的时间轴体验设计:事序图交互与用户体验优化
electron·vue·甘特图·时序图·写作软件
知识分享小能手6 天前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
@AfeiyuO6 天前
分类别柱状图(Vue3)
typescript·vue·echarts