当前位置: 首页 > 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.xdnf.cn/news/1169659.html

相关文章:

  • fuse低代码工作流平台概述【已开源】-自研
  • Java中关于线程池的解析
  • Qt 事件处理机制深入剖析
  • 厌氧菌数据挖掘可行性评估报告
  • 深入理解 Qt 中的 QImage 与 QPixmap:底层机制、差异、优化策略全解析
  • PyQt5在Pycharm上的环境搭建 -- Qt Designer + Pyuic + Pyrcc组合,大幅提升GUI开发效率
  • stm32 智能小车
  • [2025CVPR-小目标检测方向]基于特征信息驱动位置高斯分布估计微小目标检测模型
  • AI视频-剧本篇学习笔记
  • LeetCode 633.平方数之和
  • Leetcode力扣解题记录--第73题(矩阵置零)
  • RabbitMQ-交换机(Exchange)
  • 【大模型记忆实战Demo】基于SpringAIAlibaba通过内存和Redis两种方式实现多轮记忆对话
  • Arraylist与LinkedList区别
  • STM32-SPI全双工同步通信
  • LWIP学习记录2——MAC内核
  • mybatis多对一一对多的关联及拼接操作以及缓存处理
  • 【学习路线】Python全栈开发攻略:从编程入门到AI应用实战
  • Custom SRP - Draw Calls
  • Claude Code Kimi K2 环境配置指南 (Windows/macOS/Ubuntu)
  • python小工具:测内网服务器网速和延迟
  • Qt资源系统:如何有效管理图片和文件
  • Canmv k230 DAC案例——TLV5638
  • 104.二叉树的最大深度
  • API是什么,如何保障API安全?
  • 刀客doc:Netflix与YouTube开始在广告战场正面交锋
  • [学习] 笛卡尔坐标系的任意移动与旋转详解
  • 洛谷 B3939:[GESP样题 四级] 绝对素数 ← 素数判定+逆序整数
  • 深入解析 Pandas:Python 数据分析的强大工具
  • Jenkins接口自动化测试(构建)平台搭建