Vue+Element-UI 多语言化
VUE+Element-UI 多语言化
写在前面
应项目需要同时感谢项目组前辈给我这次机会去实践 vue+element-ui 本地化的任务 ,本着分享的原则将过程记录下来
VUE及Element-UI信息
网站快速成型工具
Element-UI渐进式JavaScript 框架
Vue.js
准备
在查阅了一些资料之后发现所谓本地化就是将相应的menu、tips、message做成变量,同时将这些变量对应的值记录在相应的文件中,由一个全局变量做控制开关,在合适的时候载入相应的文件以实现本地化。
vue本地化 相关资料比较多的就是集成vue-i18n,所以这里也是选用了vue-i18n
本地化记录key-value 的文件方式主要为.json 文件和.js文件,这里选用了js文件的方式
过程
- vue-cli 搭建脚手架
- 引入 vue-i18n
在vscode 的集成终端窗口执行
npm install --save vue-i18n
- 在main.js中引用
import VueI18n from 'vue-i18n' import locale from 'element-ui/lib/locale' import enLocale from 'element-ui/lib/locale/lang/en' import zhLocale from 'element-ui/lib/locale/lang/zh-CN' import twLocale from 'element-ui/lib/locale/lang/zh-TW' ... Vue.use(VueI18n) Vue.use(ElementUI, { zhLocale }); ... // InitLanguage 这里引入了vue-cookie,是为了将用户选择的语言存储到Cookie里,在以后访问站点不需要重新选择语言 function InitLanguage() { return Vue.cookie.get('DefaultLanguage') == null ? 'zh-CN' : Vue.cookie.get('DefaultLanguage'); } const i18n = new VueI18n({ locale: InitLanguage(), // 语言标识,默认汉语,先去cookie查找,如果存在并有效,cookie值即为默认语言类型;否则默认为中文简体 messages: { 'en-US': Object.assign(require("../static/lang/en"),enLocale), 'zh-CN': Object.assign(require("../static/lang/zh-CN"),zhLocale), 'zh-TW': Object.assign(require("../static/lang/zh-TW"),twLocale) } }); locale.i18n((key, value) => i18n.t(key, value));//为了之后将element-ui组件本地化 ... new Vue({ el: '#app', router, i18n,//将VueI18n挂载到vue实例上 store: store, components: { App }, template: '<App/>' })
- 保存key-value 的文件
- 项目结构
- en.js
- 项目结构
module.exports = { localization: { selectlanguage: "Language", type: "English", hello: 'Hello', login: 'Login', welcome: "Welcome" } }
* zh-CN.js
module.exports = { localization: { selectlanguage: "选择语言", type: "中文简体", hello: '你好', login: '登录', welcome: "欢迎" } }
* zh-TW.js
module.exports = { localization: { selectlanguage: "選擇語言", type: "中文繁體", hello: '你好', login: '登錄', welcome: "歡迎" } }
-
这里通过下拉框更改语言类型
App.vue
<el-select v-model="value" @change="switchLanguage(value)" class="el-select"> <el-option v-for="item in language" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select>
App.vue
<script> export default { data() { return { value: this.$i18n.locale, //为了把下拉框的默认值和全局变量的值一致,以此实现载入页面时显示的语言和数据配置一致 language: [ { value: "en-US", label: "English" }, { value: "zh-CN", label: "中文简体" }, { value: "zh-TW", label: "中文繁體" } ] }; }, methods: { switchLanguage(value) { if (value == "zh-CN") { this.$i18n.locale = "zh-CN"; } else if (value == "en-US") { this.$i18n.locale = "en-US"; } else if (value == "zh-TW") { this.$i18n.locale = "zh-TW"; } //在选择了显示的语言后,将配置保存到Cookie中 this.$cookie.set( "DefaultLanguage", value, // { // expires: "30m" //默认cookie有效时间为30分钟 } ); } } </script>
- 使用
在定义变量的地方用这种方式写,一定要用$t()的方式
<div> {{ this.$t("localization.hello") }}</div>
在这因为没有掌握Vue,遇到个小问题就是element 的标签 默认属性 不能绑定变量
//会报错 <el-form-item label="this.$t('localization.eamilName')" class="vote-query-email"> </el-form-item>
需要在属性(lable)前加上 :就可以绑定变量了
<el-form-item :label="this.$t('localization.eamilName')" class="vote-query-email"> </el-form-item>
END
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 用 C# 插值字符串处理器写一个 sscanf
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!