前端中英文切换,复制所有页面 / i18n

最新推荐文章于 2024-06-19 21:43:17 发布

宝儿的程序生涯

最新推荐文章于 2024-06-19 21:43:17 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/fengtingYan/article/details/109519780

版权

本文介绍了两种前端页面中英文切换的方案。方案一涉及复制所有页面并添加_en后缀，修改相应语言内容；方案二提及使用jquery-i18n-properties进行国际化，但存在未解决的bug。文章还提到了实际项目的部署和各页面开发耗时。

摘要由CSDN通过智能技术生成

方案一：
效果图：
在这里插入图片描述
右上角的中文和英文，然后把所有的.html文件复制一份加_en（index_en.html）js里面有提到html的也要改，接下来把_en.html里面的中文全部改掉，就好啦

<div class='language' style="width:100px;position: absolute;left:1235px;top:5px"> 
 <a id="lan_zh" style="color: #FFF;font-size:12px; text-decoration:none;" href=<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

宝儿的程序生涯

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端中英文切换,复制所有页面 / i18n

jquery.i18n.properties前端国际化方案jQuery.i18n.properties开发指南
复制链接

扫一扫

前端若依框架vue3+Element Plus实现i18n国际语言切换

wenlimin00的博客

05-29

970

最近要完成一个国际化的后台管理系统,但是遇到了一个问题,就是我在切换语言的时候,element 组件不更新,主要是main.js里头的 locale 语言没有更新,也就是main.js 只能在项目启动的时候后走一遍,其他页面跳转都不会走main.js, 所以导致了element plus 组件的国际语言没有更新,只能每次退出或者手动强制刷新项目或者页面才可能有效果,这样的话不符合前端需求呀,花了几天的时间终于把这个问题解决了, 1.每次登录成功后,刷新整个项目页面 location.reload()

vue 使用vue-i18n做全局中英文切换的方法

10-17

主要介绍了vue 使用vue-i18n做全局中英文切换的实现方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下

参与评论您还未登录，请先登录后发表或查看评论

前端jq实现中英文切换（i18n国际化方式，apicloud打包后也适用）

q_qman的博客

07-16

2036

1.项目文件及目录 2.准备js github下载地址：https://github.com/T-baby/jquery.i18n/releases 3.页面代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g...

nuxt使用i18n进行中英文切换

leng0920的博客

10-19

1000

nuxt使用i18n进行中英文切换

i18n前端国际化实现中英文切换

qq_57232613的博客

04-04

512

【代码】i18n前端国际化实现中英文切换。

【nuxt2/nuxt3】@nuxtjs/i18n国际化

m0_68324632的博客

12-09

7134

在网上阅读的大部分案例都还在使用vue-i18n插件做教程，实际上nuxt本身就已经基于vue-i18n封装了插件。而且它比vue-i18n封装了更多好用的功能，具体的使用方法我们可以查看但是官方好像没有做中文翻译，所以我在这里出了一篇中文教程，第一这个插件比vue-i18n用起来更方便，第二中文教程也方便大家快速使用上这个插件。

Vue前端使用I18实现中英文切换

qq_59833893的博客

10-12

2379

3. 查看 src/locales/lang/zh-cn.js、src/locales/lang/en.js。进入需要有翻译功能的页面进行配置，如 login.vue。1. 进入src/locales/index.js。2. 查看 src/utils/tool.js文件。

vue3使用vue-i18n进行中英文切换

波波不加冰的博客

06-19

362

在具体的文件中使用 i18n, 以Header.vue文件为例。自定义，根据文件中的层级关系书写。目录，用于存放语言映射文件。(对i18n进行配置)赋值即可动态切换，如下。

html5 中英文语言切换,使用 vue-i18n 切换中英文效果

weixin_30118071的博客

05-31

1075

使用 vue-i18n 切换中英文效果2018-12-30编程之家https://www.jb51.cc编程之家收集整理的这篇文章主要介绍了使用 vue-i18n 切换中英文效果，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。vue-i18n 仓库地址：nofollow" href="https://github.com/kazupon/vue-i18n">https://gi...

vue-i18n的使用,前端实现中英文切换

热门推荐

Army-海军的博客

09-12

1万+

首先建个文件夹，结构是这样的，为了方便以后更改方便，强烈推荐的做法。这里的en.js和zh.js就是中英文文件了，你要加其他语言继续加几文件就行。代码结构为这样,中英文结构要一致，变量名也要一样，这个你懂的再看一下index.js这个文件负责的事情就是引入这两个文件，声明文件，最后暴露接口即可，主要是为了后期的其他js文件也能用到，我学习一向是先把代码弄上去，先实现，然后再去弄懂它...

前端实现中英文翻译切换

07-06

总的来说，这个压缩包提供了一个基础的前端中英文翻译切换实现，你可以通过分析和修改这个示例来适应自己的项目需求。了解以上概念后，你可以进一步学习和掌握前端国际化（i18n）的最佳实践，以创建更加完善的多语言...

使用Vue i18n对前端页面进行国际化处理

09-05

总的来说，使用Vue i18n进行前端页面的国际化处理，可以让我们的应用更好地适应全球化市场，提高用户体验。通过合理的组织和配置，我们可以轻松地管理和维护多种语言的文本，使得代码更加简洁和可维护。

前端国际化插件i18n

09-28

在前端开发中，实现i18n通常需要借助专门的插件，以简化和自动化这个过程。这些插件能够帮助开发者管理各种语言版本的文本资源，动态地根据用户设置或浏览器语言环境来切换显示的语言。本示例中提到的两个文件，`...

Vue或UniApp 前端语言国际化 i18n lang.js包

06-23

本篇将详细介绍Vue和UniApp中的i18n实现，以及lang.js包的相关内容。首先，Vue.js的国际化插件名为`vue-i18n`，它是一个为Vue.js应用程序提供多语言支持的库。`vue-i18n.js`是这个插件的核心文件，包含了处理语言...

i18n中英文切换

QLF19的博客

07-19

383

"notebook":"知识小册","comments":"留言板","aticle":"文章","about":"关于","zh_CN":"中文","files":"归档","en_US":"英文"（3）、在index.ts中引入。（2）、在项目中使用。// 初始化i18n。

基于贝叶斯网络BO-Transformer-BiLSTM实现负荷数据回归预测附matlab代码.rar

07-27

1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。替换数据可以直接使用，注释清楚，适合新手

易语言 - 易语言我的世界3D源码

最新发布

07-27

易语言我的世界3D源码

avif-0.5.0-cp37-cp37m-manylinux2010_i686.whl

07-27

python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！

Vue3项目切换语言使用vue-i18n前端实现中英文切换

05-25

Vue-i18n 是一个 Vue.js 的插件，用于在 Vue.js 应用程序中实现国际化和本地化。以下是实现中英文切换的步骤： 1. 安装 vue-i18n ```bash npm install vue-i18n --save ``` 2. 创建语言文件在项目根目录下创建 `lang` 文件夹，在该文件夹下创建 `zh-CN.js` 和 `en-US.js` 两个语言文件，分别存放中文和英文的翻译内容。 ```javascript // lang/zh-CN.js const messages = { hello: '你好', world: '世界' } export default messages ``` ```javascript // lang/en-US.js const messages = { hello: 'Hello', world: 'World' } export default messages ``` 3. 引入和配置 vue-i18n 在 `main.js` 中引入和配置 vue-i18n。 ```javascript import Vue from 'vue' import VueI18n from 'vue-i18n' import messages from './lang/zh-CN.js' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'zh-CN', // 设置默认语言 messages }) new Vue({ i18n, render: h => h(App) }).$mount('#app') ``` 4. 在组件中使用在组件中使用 `$t` 方法获取翻译内容，`$i18n` 属性获取当前语言环境。 ```html <template> <div> <p>{{ $t('hello') }}</p> <p>{{ $t('world') }}</p> <button @click="changeLang">切换语言</button> </div> </template> <script> export default { methods: { changeLang() { const lang = this.$i18n.locale === 'zh-CN' ? 'en-US' : 'zh-CN' this.$i18n.locale = lang } } } </script> ``` 以上就是使用 vue-i18n 实现中英文切换的步骤。