Vue + Element UI 前端篇(五):国际化实现

这篇具有很好参考价值的文章主要介绍了Vue + Element UI 前端篇(五):国际化实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue + Element UI 实现权限管理系统 前端篇(五):国际化实现 

国际化支持

1.安装依赖

执行以下命令,安装 i18n 依赖。

yarn add vue-i18n

Vue + Element UI 前端篇(五):国际化实现,vue.js,前端,javascript

$ yarn add vue-i18n
yarn add v1.9.4
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
info fsevents@1.2.4: The platform "win32" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
[5/5] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vue-i18n@8.0.0
info All dependencies
└─ vue-i18n@8.0.0
Done in 28.19s.

Vue + Element UI 前端篇(五):国际化实现,vue.js,前端,javascript

2.添加配置

2.1 在 src 下新建 i18n 目录,并创建一个 index.js。

Vue + Element UI 前端篇(五):国际化实现,vue.js,前端,javascript

index.js

Vue + Element UI 前端篇(五):国际化实现,vue.js,前端,javascript

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)
 
// 注册i18n实例并引入语言文件,文件格式等下解析
const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    'zh': require('@/assets/languages/zh.json'),
    'en': require('@/assets/languages/en.json')
  }
})

export default i18n

Vue + Element UI 前端篇(五):国际化实现,vue.js,前端,javascript

2.2 在 assets 目录下面创建连个多语言文件。

Vue + Element UI 前端篇(五):国际化实现,vue.js,前端,javascript

zh.json

Vue + Element UI 前端篇(五):国际化实现,vue.js,前端,javascript

{
    "common": {
        "home": "首页",
        "login": "登录",
        "exit": "退出"
    },
    "sys": {
        "userMng": "用户管理",
        "deptMng": "机构管理",
        "roleMng": "角色管理",
        "menuMng": "菜单管理",
        "logMng": "日志管理"
    }
}

Vue + Element UI 前端篇(五):国际化实现,vue.js,前端,javascript

en.json

Vue + Element UI 前端篇(五):国际化实现,vue.js,前端,javascript

{
    "common": {
        "home": "Home",
        "login": "Login",
        "exit": "Exit"
    },
    "sys": {
        "userMng": "User Manage",
        "deptMng": "Dept Manage",
        "roleMng": "Role Manage",
        "menuMng": "Menu Manage",
        "logMng": "Log Manage"
    }
}

2.3 在 main.js 中引入 i18n 并注入到 vue 对象中。

Vue + Element UI 前端篇(五):国际化实现,vue.js,前端,javascript

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import api from './http/index'
import i18n from './i18n'

Vue.config.productionTip = false

Vue.use(ElementUI)
Vue.use(api)

new Vue({
  el: '#app',
  i18n,
  router,
  render: h => h(App)
});

3.字符引用

在原本使用字符串的地方,引入国际化字符串。

把原本的“用户管理”、“菜单管理”等字符串换成如下格式引入。

 

Vue + Element UI 前端篇(五):国际化实现,vue.js,前端,javascript

3.切换菜单

在用户信息前边添加一个用于语言切换的菜单,用于切换不同的语言。

Vue + Element UI 前端篇(五):国际化实现,vue.js,前端,javascript

菜单语言切换的时候,修改国际化的设置

Vue + Element UI 前端篇(五):国际化实现,vue.js,前端,javascript

4.启动测试

Vue + Element UI 前端篇(五):国际化实现,vue.js,前端,javascript

 选择点击切换英文,导航菜单成功切换到英文。

Vue + Element UI 前端篇(五):国际化实现,vue.js,前端,javascript文章来源地址https://www.toymoban.com/news/detail-701248.html

到了这里,关于Vue + Element UI 前端篇(五):国际化实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue 前端 + 若依(ruoyi)后端 实现国际化

    记录一下,前端使用vue,后端使用若依(ruoyi,基于spring-boot)实现页面,后端返回提示信息国际化 vue:2.6.12 vue-i18n:^8.27.2 安装vue-i18n,注:最新的交于该版本有差异,所以指定使用版本:8.27.2 添加国际化js文件:language.en_US.js 添加国际化js文件:language.zh_CN.js 添加i18n.js ma

    2024年02月12日
    浏览(59)
  • vue-i18n国际化多语言与多套UI组件库使用(Element Plus、Ant Design Vue、Naive UI)

    demo源码:Vue3 UI Lang 因调研需要,需在同一个项目中集成好几种UI组件库的多语言实现,查看各种组件库的表现情况,以便选定组件库。 注意:这只在调研过程中会如此,实际开发项目中极少存在一个项目中集成多个UI组件库的情况。 本demo实际试验阿拉伯语、法语、葡萄牙语

    2024年02月08日
    浏览(57)
  • 记一次前端Vue项目国际化解决方案

    有一个vue项目,要实现国际化功能,能够切换中英文显示,因为该项目系统的用户包括了国内和国外用户。 1、页面表单上的所有中文标签要国际化,包括表单属性标签、表格列头标签等, title=“数量”; 2、输入框的提示内容需要国际化,如 placeholder=“选择日期” 3、js代码

    2024年02月20日
    浏览(52)
  • 菜鸟Vue教程 - 实现带国际化的注册登陆页面

    初接触vue的时候觉得vue好难,因为项目中要用到,就硬着头皮上,慢慢的发现也不难,无外乎画个布局,然后通过样式调整界面。在通过属性和方法跟js交互。js就和我们写的java代码差不多了,复杂一点的就是引用这种那种库,然后就能做出来一个界面了。如果你的项目就是

    2024年02月12日
    浏览(59)
  • vue-i18n 实现国际化,支持切换不同语言

    需求:后台管理系统,可以实现语言切换 实现过程:用的i18n来实现的语言切换,网上能看到好多模板,根据自己的需求,修改一下即可使用,大概都是差不多的,因为涉及到后端,所以要跟后端协商一致决定去写,我的设计思路是跟着后端设计更改的,如下: 1.语言是后端接

    2024年02月12日
    浏览(44)
  • 如何优雅的实现前端国际化?

    JavaScript 中每个常见问题都有许多成熟的解决方案。当然,国际化 (i18n) 也不例外,有很多成熟的 JavaScript i18n 库可供选择,下面就来分享一些热门的前端国际化库! i18next 是一个用 JavaScript 编写的全面的国际化框架,提供标准的 i18n 功能,包括复数、上下文、插值、格式等。

    2024年01月23日
    浏览(67)
  • Vue 国际化之 vue-i18n 的使用

    目录 一、安装 二、使用 1、准备语言包 2、准备翻译的语言环境 3、实现语言翻译 三、整合 ElementUI 语言包 1、扩展中文 2、扩展英文  3、使用扩展语言翻译 四、问题记录 五、扩展 vue3 中使用 vue-i18n 如果在一个模块系统中使用它,你必须通过  Vue.use()  明确地安装  vue-i18n

    2024年03月14日
    浏览(54)
  • SpringBoot+Vue前后端分离项目国际化支持

    i18n.js文件 language.en_US.js文件 language.zh_CN.js文件 messages_en_US.properties文件 messages_zh_CN.properties文件

    2024年02月04日
    浏览(60)
  • 【三十天精通Vue 3】 第十八天 Vue 3的国际化详解

    ✅创作者:陈书予 🎉个人主页:陈书予的个人主页 🍁陈书予的个人社区,欢迎你的加入: 陈书予的社区 🌟专栏地址: 三十天精通 Vue 3

    2023年04月27日
    浏览(47)
  • 使用uniapp开发国际化---app,vue,nvue

    hello-i18n 示例工程 - DCloud 插件市场  en.json----\\\"自定义key\\\":\\\"英文\\\"  zh-Hans.json----\\\"自定义key\\\":\\\"中文\\\"      注意:json文件中的名称需要中英文对应。 index.js vue页面模板使用---- $t(\\\'\\\') nvue页面模板使用---- t(\\\'\\\') pages.json 使用 ---- %index.title% data中使用--- this.$t(\\\'\\\') 启动项目,就可以成功切

    2024年02月06日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包