vue项目涉及到国际化语言切换 i18n

最新推荐文章于 2023-06-15 15:36:04 发布
原创 最新推荐文章于 2023-06-15 15:36:04 发布 · 210 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文介绍如何在Vue项目中实现多语言支持。通过安装并配置i18n插件，创建不同语言文件，完成语言切换功能。适合初学者快速上手。

后台管理系统首次涉及到国际化语言切换，借助i18n框架来实现国际化语言的切换。初次借助这块，所以写个简单的demo。

第一步：安装i18n依赖

npm i vue-i18n

第二步：在main.js中引入i18n

// 引入i18n
import VueI18n from 'vue-i18n' 
Vue.use(VueI18n)

第三步：创建一个lang目录，再此目录下创建zh.js和en.js文件，将其引入到main.js中
在这里插入图片描述
en.js:
在这里插入图片描述
zh.js:
在这里插入图片描述
第四步：将zh.js和en.js文件引入到main.js
在这里插入图片描述
第五步：使用i18n
在这里插入图片描述
最终实现的效果如下图所示：
在这里插入图片描述
在这里插入图片描述

vue国际化教程
renkai721的专栏
09-14 4175
ruoyi国际化,vue国际化,springboot国际化,i18n国际化,vue菜单国际化不起作用,vue页面刷新国际化失效
Vue3 - 实现vue-i18n国际化多语言中英文切换功能全流程，支持从后端服务器API获取语言json配置文件动态渲染，语言切换后全部页面立即实时变化可自定义新增各国语言（附带组件库的文字国际化）
最新发布
🏆 前端领域优质创作者
01-04 1万+
vue3，vue-i18n，国际化教程，vue3项目国际化(使用vue-i18n)，如何让语言包放到服务器通过请求获取，vue3项目实现国际化，Vue3 I18n 国际化插件，从安装到使用最全篇，vue3中英文语言切换，vue3 i18n国际化将json中英文配置放到后端，vue3项目中实现多语言 vue-i18n处理动态加载后端数据语言，如何在vue3中使用国际化i18n插件vue3使用i18n，动态加载语言包，vue3 i18n如何从后端获取zh.js en.js配置文件放到服务器端，接口获取语言js，
vue项目使用i18n插件实现多语言切换功能
热门推荐
qq_26780317的博客
07-15 1万+
前言：在一些网站经常可以看到切换语言包，将网站转化成多种语言版本的情况。最近项目中，也涉及到项目语言国际化的需求，在此记录一下。 一、实现思路 web项目多语言(i18n，即国际化)是比较常见的需求，常规的做法大概有以下几种： 1.每种语言单独开发页面，适用于CMS之类的网站； 2.多语言文本和页面结构分离，运行时动态替换，适用于单页应用(SPA); 3.直接用网页翻译插件，机器翻译。这种效果不太理想，同时也有一些局限性。 各个方案遇到的问题： 1.现在网上比较通用的，就是使用vue-i18n插件。这个插件
vue项目实现多语言切换的思路
10-14
主要介绍了vue项目实现多语言切换的思路，帮助大家完成多语言翻译，感兴趣的朋友可以了解下
Vue项目中国际化的语言切换
weixin_48837605的博客
09-01 2774
效果: 先实现切换中英文 1.下载包: npm i vue-i18n@8.22.2 请注意版本号。vue-i18n现在有了一个新版本，对应的api有些不兼容，请还是使用8.22.2这个版本! 2.ElementUI多语言配置 引入element语言包文件src/lang/index.js // 进行多语言支持配置 import Vue from 'vue' // 引入Vue import VueI18n from 'vue-i18n' // 引入国际化的插件包 import loca
vue国际化
weixin_52923266的博客
06-15 216
对于一些跨国项目来说，国际化是尤为重要的，那么什么要国际化呢?国际化的意思就是将我们写的项目，能够根据不同国家的语言，进行翻译，进行切换，方便不同国家的客户使用。
vue-formulate-i18n:vue-formulate的国际化（i18n）支持
05-14
Vue.js 的国际化支持是通过官方的vue-i18n库实现的，它允许开发者轻松地切换应用的语言环境，提供不同语言的翻译。Vue Formulate通过集成vue-i18n，为表单组件的提示、错误消息和其他交互文本提供了国际化的选项。 ...
vue项目使用 vue-i18n 切换中英文
xcxcsdn的博客
10-26 839
引自使用 vue-i18n 切换中英文 - rogerwu - 博客园 vue-i18n 仓库地址：https://github.com/kazupon/vue-i18n 兼容性： 支持 Vue.js 2.x 以上版本 安装方法：（此处只演示 npm） npm install vue-i18n 使用方法： 1、在 main.js 中引入 vue-i18n （前提是要先引入 vue） import VueI18n from 'vue-i18n' Vue.use(VueI18
精选资源
Vue-ElementPlus-i18n
04-05
Vue.js 是一款非常流行的前端JavaScript框架，它以其易用性、高效性和灵活性赢得...通过这个主题，我们可以深入学习到Vue的组件化开发、Vue-i18n的配置与应用，以及如何利用ElementPlus构建具有多语言能力的前端项目。
Vue国际化
daliandianzi的博客
06-24 276
使用vue-i18n完成vue国际化 1.安装vue-i18n npm add vue-i18n 2.在src下新建i18n目录，并创建一个index.js。 import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) // 注册i18n实例并引入语言文件，文件格式等下解析 const i18n = new VueI18n({ locale: 'zh_cn', messages: { 'zh_cn': re
vue-国际化
KK_DU
10-21 373
安装i18n: npm install vue-i18n –save 目录结构： cn.js里的内容： 4.en.js里的内容： 5.index.js里的内容： 6.i18n.js里的 main.js里引入i18n.js html: Js: 效果图：（elementui样式被改过 不上css代码了） ...
Vue切换语言（vue-i18n插件）
Code P的博客
10-13 348
1、安装插件 npm install vue-i18n 2、新建语言内容切换的配置文件 3、配置文件内容 （1）language-en.js module.exports = { title: 'VueI8n usage example', userName: 'userName', pwd: 'password' } （2）language-zh.js module.exports = { title: 'VueI8n使用', userName: '用户名', pwd: '密
vue的国际化
qq_43505774的博客
08-13 339
在src目录下面建立语言包 common下的ch.js module.exports = { message: { login: '登录', Username: '用户名', Password: '密码', Captcha: '验证码', Language: '语言', zh: '中文', en: '英文' } } index.js import VueI18n from 'vue-i18n' Vue.use(VueI18n);
Vue国际化（vue-i18n）
windgentle的博客
10-27 1019
一、安装 三种方式： 1、script引入 2、npm安装 npm install vue-i18n 3、yarn安装 yarn add vue-i18n 二、配置 main.js文件配置 1.引入i18n国际化插件 import Vue from ‘vue’ import VueI18n from ‘vue-i18n’ Vue.use(VueI18n) 2.注册i18n实例并引入语言文件，文件格式等下解析 const i18n = new VueI18n({ locale: ‘zh’, // 定义
vue国际化（多语言）
ZhouHui优快云
06-08 9796
vue国际化（多语言）
VUE实现国际化
NIKKT的博客
04-04 620
Vue实现国际化
Vue 语言国际化
wanghui374的博客
03-04 463
1、安装插件 npm install vue-i18n //中英文 2、创建I18n实例 src/i18n/index.js import VueI18n from ‘vue-i18n’; import Vue from ‘vue’; Vue.use(VueI18n); const i18n = new VueI18n({ locale:localStorage.getItem("l...
vue多语言中英文切换
weixin_57246351的博客
09-16 2147
第一步,下载包 （特别注意：vue-i18n版本需要控制在8） npm install vue-i18n@8.0.0 --save 或者 yarn add vue-i18n@8.0.0 --save 第二步，需要单独一个多语言的实例化文件 src/lang/index.js // 所有跟语言相关的代码 import Vue from 'vue' // 引入i18n核心包 import VueI18n from 'vue-i18n' import locale from 'element-ui/lib/
vue 手动选择切换设置语言（详细三步）
@baby张~的博客
06-10 9830
vue项目开发过程中，有的可能需要语言的切换，Element也提供了几种方法，国际化菜单中，我们更多时候想要的是，可以自由的切换，我们基于element改进一下。 我们使用插件vue-i18n 来更好的控制 第一步： 命令行执行 npm install vue-i18n --save 安装好 vue-i18n 保险起见看 package.json里是否安装好 第二步： main.js 引...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值