当前位置: 首页 > news >正文

vue2.0 + elementui + i18n:实现多语言功能

首先提前准备几个文件:
1、zh-CN.json

{"user": "用户"
}

2、en-US.json

{"user": "User"
}

3、index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import en from './en-US.json'
import zh from './zh-CN.json'
Vue.use(VueI18n)
const messages = {en: {...en,...enLocale},zh: {...zh,...zhLocale}
}
let language = 'en'
if (localStorage.getItem('userLanguage')) {language = localStorage.getItem('userLanguage')
} else {localStorage.setItem('userLanguage', language)
}export default new VueI18n({locale: language,fallbackLocale: 'en',messages
})

这样中英文配置文件就全了,最后是 main.js,将三个文件放到一个文件夹i18n中

import Vue from 'vue'
import ElementUI from 'element-ui'
import i18n from './i18n/index'
Vue.use(ElementUI, {i18n: (key, value) => i18n.t(key, value)
})
new Vue({i18n,render: h => h(App)
}).$mount('#app')

改变语言的方法

this.$i18n.locale = ‘zh’;

http://www.lryc.cn/news/596298.html

相关文章:

  • SpringBoot集成PDFBox实现PDF导出(表格导出、分页页码、电子签章与数字签名)
  • Excel file format cannot be determined, you must specify an engine manually.
  • SparkSQL 聚合函数 COUNT 对 NULL 值的处理
  • MDC(Mapped Diagnostic Context) 的核心介绍与使用教程
  • CMake项目中的main函数重复定义错误
  • 拆分、合并PDF
  • 实现分布式锁
  • 数据库表介绍
  • 金仓数据库风云
  • Docker 安装、常用命令、应用部署
  • 3516cv610 mqtt库移植
  • 【工作常用】C++/QT插件编程思想——即插即用
  • React 英语单词补全游戏——一个寓教于乐的英语单词记忆游戏
  • docker build 和compose 学习笔记
  • 如何构建FunASR的本地语音识别服务
  • 开发者如何集成AI绘画?智创聚合API简化Midjourney接入
  • Linux系统权限全面解析:掌握你的数字王国钥匙
  • RPA软件机器人如何提高工作效率?
  • LeetCode 1.
  • GRU模型
  • Three.js 实现梦幻星河流光粒子特效原理与实践
  • sysbench对linux服务器上mysql8.0版本性能压测
  • Java(Set接口和HashSet的分析)
  • 决策树学习笔记
  • C++类和对象(3)
  • C++刷题常用方法
  • 4.组合式API知识点(2)
  • 低速信号设计之 MII 篇
  • 如何解决pip安装报错ModuleNotFoundError: No module named ‘Cython’问题
  • 【大模型记忆实战Demo】基于SpringAIAlibaba通过内存和Redis两种方式实现多轮记忆对话