vue 使用 i18n 国际化语言插件小结

最新推荐文章于 2024-05-07 15:12:59 发布
最新推荐文章于 2024-05-07 15:12:59 发布
阅读量213 收藏
点赞数
分类专栏： 前端开发 vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42386231/article/details/117693792
版权
本文介绍了如何在 Vue 项目中使用 vue-i18n 插件实现多语言支持，包括安装插件、配置语言包、全局引入及在组件中使用。特别提到在切换语言时的数据渲染问题，以及利用 axios 拦截器解决请求时语言同步的问题。
摘要由CSDN通过智能技术生成

vue 使用 i18n 国际化语言插件小结

  1. 先安装依赖 npm install vue-i18n
  2. 新建一个文件夹，存放你的index文件和需要的语言包，我这里需要三种语言，我就创建了三个语言包在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  1. 配置你的index.js，引入国际化插件，我这里设置了用户如果没选选择语言就默认是中文繁体。在这里插入图片描述
silentTranslationWarn: true,  作用是去除黄色警告

  1. 然后在main.js文件中全局引用i18n在这里插入图片描述在这里插入图片描述

  2. 在页面中的两种引用方式：在这里插入图片描述
    在这里插入图片描述

  3. 切换语言时，写在data里面的数据不会重新渲染，这个时候需要用以下的方式渲染在这里插入图片描述

  4. 切换语言时，本地存储的语言标识发生改变，而axios请求没有二次触发，导致页面请求的文字出错，这个时候需要用到axios拦截器，每次请求先拦截，再从本地拿到最新的语言标识来请求数据在这里插入图片描述

扫码加q群
在这里插入图片描述

小白 猿
关注
专栏目录
插件_国际化语言
个人笔记
04-07 169
作用: 约定式多语言支持, 在一个项目中拥有各国语言切换的功能
多语言国际化组件i18n
m0_62371650的博客
10-24 733
多语言国际化组件i18n
用于国际化的多语言插件
11-15
eclipse国际化的多语言插件eclipse国际化的多语言插件eclipse国际化的多语言插件eclipse国际化的多语言插件eclipse国际化的多语言插件eclipse国际化的多语言插件
Vue I18n 国际化插件，从安装到使用最全篇
热门推荐
forever__fish的博客
11-12 2万+
国际化是指项目能够根据不同国家的语言进行转换，便于不同国家的用户使用。Vue I18 是 Vue.js 的国际化插件，它可以轻松地将一些本地化功能集成到应用程序中。为什么插件名称是 i18n 呢？它的全程是 internationalization，插件名取了首字母 i 和尾字母 n，中间一共有 18 个字母，所以组合起来就叫 i18n。哈哈哈哈，起名起的离谱。// 定义英文语言包对象},tabs: {// 定义中文语言包对象hotspot: '热点',experience: '经验',
vue3使用插件i18n实现国际化多语言
最新发布
weixin_47529732的博客
05-07 3270
网站（https:example.com/homeView）支持繁体中文、英文，法语，日语，阿拉伯语，且要求默认路径下是英文，其他的语言切换要显示在路径上如https:example.com/zh/homeView.lang下的其他文件仿照上述改写一下就好了。
前端国际化小结
zw.will
12-17 3766
近期在做国际化的改造，做了相应的调研，简单做下项目前端国际化的小结 国际化可以分为前端国际化和后端国际化，也可以是前后端组合的国际化 后端多为spring国际化，这里不做展开，百度一下到处都是常见型常见的前端国际化方法步骤如下：（原理） 定义国际化配置 根据环境读取配置 将配置展现在页面上 展开说： 定义国际化配置： 定义的方式有多种，多以文件的形式单独保存，如json，js，properti
多语言支持
weixin_52910435的博客
06-01 588
多语言支持 国际化处理 vue项目中的多语言支持使用的是vue-i18n https://kazupon.github.io/vue-i18n/zh/started.html 目标 实现elementUI中英文切换功能，感受中文切换的效果 安装国际化的包 npm i vue-i18n@8.22.2 请注意版本号。vue-i18n现在有了一个新版本，对应的api有些不兼容，请还是使用8.22.2这个版本 ElementUI多语言配置 引入element语言包文件src/lang/index.js //
Vue中常用的第三方库介绍与使用
举个例子，如果我们需要实现一个复杂的数据可视化图表，使用Vue自带的功能可能会比较繁琐，并且需要大量的代码实现。而使用第三方图表库，可以简化我们的开发流程，快速实现我们想要的效果。 ## 1.2 第三方库对Vue...
手机浏览器 html编辑器,vue移动端富文本编辑器vue-html5-editor
weixin_36023192的博客
06-10 1053
简介 I作一新求抖直微圈ntroVue-ht享。发概程间告屏会。一控近到都从述序也问ml5-editor是一个Vue的富文本编辑器插件，简洁灵活可扩展，适用于vue2.0以上版本，支持IE11支器事的后功发久这含层请间业在屏有随些气和域，实按控幻近持的前时来能过后些的处求也务浏蔽等机站风滚或默现钮制灯近持的前时来.Vue-累小间题些动分近也程的这站画别近也程的这html5-editor遇新是直朋能...
路费学城之 vue
weixin_45967126的博客
04-04 396
目录路费学城之 vuevue笔记一、vue 框架内容大纲vue 框架Vue环境简单搭建：通过script标签导入vue文件即可挂载点el插值表达式过滤器文本指令事件指令总结二、内容大纲斗篷指令（了解）属性指令案例重点：事件指令与属性指令都可以简写事件补充表单指令条件指令案例循环指令商品循环案例面试题：todolistjs的Array操作前台数据库案例：留言板小结三、内容大纲字符串补充...
前端国际化插件i18n
09-28
前端国际化插件i18n
国际化 js插件
10-25
由于最新版的jquery.i18n.properties有问题，特意从google下载稳定的老版，这个zip包已包含原版和minified版
Js国际化插件
10-24
可实现前端html和js代码国际化的小插件，可以使html和js文件中的文字转移到配置文件中编写，实现国际化
Shiny.i18n：轻松进行闪亮的应用程序国际化
02-05
闪亮的 闪亮的应用程序国际化变得容易！ 使用它非常简单：只需以一种受支持的格式准备翻译文件，然后使用用户友好的Shiny.i18n界面将其读入您的应用程序，然后将表达式括起来即可通过翻译标签进行翻译。 因此，您的应用程序将保持整洁可读。 实际上，您可以将Shiny.i18n用作独立的R包-Shiny应用程序只是一个完美的用例示例。 使用Shiny.i18n轻松更改语言和格式。 源代码 该库源代码可以在Github上找到： 如何安装？ install.packages( " shiny.i18n " ) 或使用作为最新版本： devtools :: install_github(
vue vue-i18n插件实现国际化
半夏_2021的博客
04-20 778
vue-i18n插件实现国际化
VueI18n插件的简单应用于国际化
Bonjourjw的博客
10-27 1704
刚刚接触学习Vue.js框架结合Element-ui组件开发项目，由于最近需要实现国际化功能，在看element-ui的开发文档时，只有简单的引入没有应用实例......
vue插件集合21：vue i18n做国际化切换中英文
jdBug
01-12 487
1：安装需要的插件 npm install vue-i18n npm install js-cookie 2：创建多语言的文件夹和js文件 我是在src下创建了lang级目录，然后新建了zh.js，en.js，lang.js 三个js文件 lang.js文件内容 export default { setLang(lang) { window.localStorage.setItem('language', lang) }, getLang(defaultLang) { let localLa
jQuery i18n - 实现网站国际化
gitblog_00028的博客
03-17 819
jQuery i18n - 实现网站国际化 jquery.i18n???? jQuery based internationalization library项目地址:https://gitcode.com/gh_mirrors/jq/jquery.i18n 是一个轻量级的 JavaScript 插件，旨在帮助开发者实现网站或 Web 应用程序的国际化功能。 项目简介 jQuery i18n 提供了一...
微软的jQuery国际化插件
yangbingqi222的专栏
07-01 633
上个月，我写了一篇关于微软如何在向jQuery贡献代码的文章，也谈到了在第一批贡献的代码中的一些功能：jQuery模板和数据链接支持. 今天，我们发布了一个新的jQuery国际化插件的原型，你可以在你的JavaScript程序中引用这个插件添加国际化功能。插件涵盖了超过350种文化的国际化信息，从苏格兰盖尔语、佛里斯兰语、匈牙利语、日语到加拿大英语等。插件将以开源的形式发布。 你可以从我们的Github代码库下载插件的原型版本： http://github.com/nje/jquery-glob 另外也可以
Vue.js应用的国际化实现：vue-i18n配置与使用教程
为了实现应用程序的多语言支持，Vue 社区开发了 vue-i18n 这个插件，使得 Vue 应用能够轻松地进行国际化（i18n）设置。 1. 安装 vue-i18n 对于 Vue 2.x 版本，你应该安装 `vue-i18n` 的小于 9 的版本。可以使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值