vue中实现国际化

已于 2023-08-31 16:02:09 修改
阅读量1.1k 收藏 3
点赞数 1
文章标签： vue.js 前端 javascript
于 2023-08-24 14:04:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73248604/article/details/132472919
版权
本文介绍了如何在网页中使用i18n-jsautotranslate库实现动态翻译，包括终端命令、页面导入、设置本地语言和执行翻译的过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.打开终端，执行指令

npm i i18n-jsautotranslate

2.在需要的页面引入

import translate from 'i18n-jsautotranslate'

3.页面模版写一个id标签，必须命名为id="translate"

<div id="translate"></div>

4.在生命周期mounted() 中载入

translate.setUseVersion2(); //设置使用v2.x 版本
translate.language.setLocal('chinese_simplified'); //设置本地语种（当前网页的语种）。如果不设置，默认自动识别当前网页显示文字的语种。 可填写如 'english'、'chinese_simplified' 等，具体参见文档下方关于此的说明。
translate.execute();//进行翻译

Vue实现国际化与国际化原理深究（前端国际化通用解决方案）
xiao廸要飞
08-15 2104
如何在 Vue.js 项目中实现国际化功能，主要通过 vue-i18n 和 element-plus 库来完成。实现的核心步骤包括：定义多语言数据源，设置 locale 变量切换语言，初始化并注册 i18n 实例。文章详细描述了如何封装语言选择组件，处理 Element Plus 组件库的国际化，以及如何利用 Vuex 和 LocalStorage 保持用户的语言选择。还介绍了如何通过工具函数简化国际化文本的获取过程。最后，文章总结了国际化实现的关键步骤，强调正确处理第三方组件库的多语言支持对项目的重要性。
vue项目实现国际化方案
热门推荐
yuenandehutu的博客
12-03 2万+
报道指挥实现国际化方案 目标：实现报道指挥多语言切换功能（直接通过网页链接获取参数切换中英文）。 采用方式：使用国际化插件vue-i18n，同时需要手动编写语言（即：将项目中所有文字全部提出，增加其文字版本）。 1. 安装依赖 npm install vue-i18n 2. 定义模板并编写语言包 在项目中创建目录：i18n 其目录存在于 src 目录下，与module目录并级。 langs：目录存放语言文件。index.js 配置引用语言的关键字。 cht.js 繁体语言包。 zh.js 中文语言包。
Vue项目引入translate.js 国际化自动翻译组件
weixin_46607967的博客
11-15 1万+
建议 translate.js 配合 i18 使用本文只介绍 translate.js 的引入和使用方式无论什么库 在翻译上 都不会做到 （ 100%翻译 && 100%准确 ） 所以不要吹毛求疵。
vue项目实现国际化
m0_58403721的博客
05-30 8864
Vue+i18n+ElementUI实现国际化、多语言，无需刷新页面
Vue 项目中引入 translate.js 实现国际化自动翻译
最新发布
qq_60743005的博客
03-15 685
更多语言支持请参考文档：translate.js 文档。
vue2项目怎么实现国际化
weixin_42397189的博客
05-13 627
登录接口会返回用户选择了哪个语言code，根据这个code前端将其放到请求头上，后端会根据这个code，返回某种语言的翻译数据；许多前端框架都有相应的i18n库，例如，React有react-i18next和react-intl，Vue有vue-i18n。在全球化的今天，为了向各种语言和文化的用户提供更好的体验，网站和Web应用常常需要进行国际化（i18n）。语言包是包含各种翻译文本的文件。支持在运行时改变语言：用户可以在使用应用的过程中切换语言。日期和数字格式化：根据当前语言的习惯，格式化日期和数字。
vue国际化(中英文切换)
Wx001214的博客
06-11 843
【代码】vue国际化(中英文切换)
vue2 国际化的使用，自动翻译文件，自动生成国际化文件
weixin_45563734的博客
01-30 1241
vue2 国际化的使用，自动翻译文件，自动生成国际化文件
vue的国际化实现，包括ant-design-vue与自定义的实现
04-08
在Vue.js应用中实现国际化（i18n）是一项重要的任务，它允许你的应用程序支持多种语言，从而扩大用户群体。本篇文章将详细讲解如何在Vue项目中实现国际化，特别是结合了Ant Design Vue库的场景。 首先，让我们了解...
vue项目中vue-i18n和element-ui国际化开发实现过程
08-27
在Vue项目中，实现国际化开发是非常重要的，特别是当我们的项目需要面向全球用户时。为了实现国际化，通常我们会使用vue-i18n插件来管理语言包，而element-ui插件自身也提供了语言包。下面我们将详细介绍如何在Vue...
使用vue 国际化i18n 实现多实现语言切换功能
10-17
特别是对于前端框架Vue.js，它已经具有支持国际化插件的能力，本文将重点介绍如何使用Vue的国际化库vue-i18n来实现多语言切换功能。 首先，我们需要创建一个名为i18n的文件夹，在此文件夹内创建三个主要文件：en.js...
i18n-translate-json:自动翻译node-i18n JSON文件的npm模块
05-17
i18n-translate-json 通过Google Translate API自动将node-i18n JSON文件转换为不同的语言。 安装 npm install -g i18n-translate-json 用法 您需要一个。 i18n-translate-json apiKey dir sourceLang (targetLang1,targetLang2,..) 例如 i18n-translate-json iuOHAEbo9H788d34h93h4diouehIUHI locale/ en es,fr 根据Google Translate API语言代码，这会将locale/en.json所有字符串（相对于Shell中的当前文件夹）从英语转换为西班牙语和法语。 目标语言列表是可选的。 如果不存在，它将被翻译成Google翻译支持的所有语言。 学分 基于Thoma
vuetranslate:VueJS插件翻译
05-17
Vue翻译 一个VueJS（1.x，2.0+）插件，用于基本翻译。 这是什么？ 是一个用于处理组件基本翻译的插件，它添加了mixin和指令以最舒适的方式对其进行处理。 像Vue-i18n吗？ 是的，不是，Vue-i18n是一个很棒的插件，比这个插件完整得多。 该句柄也可以翻译，但这是一个更基本的思想，并且文件更小（仅一个文件！）。 期待什么？ 只是翻译，就是这么简单。 例子 import Vue from 'vue' ; import VueTranslate from 'vue-translate-plugin' ; Vue . use ( VueTranslate ) ; var myComp = Vue . extend ( { template : `<div> {{ t('Hello World') }} <span v-transl
vue 或 js 使用谷歌翻译实现国际化
HHH917的博客
08-24 6353
但由于使用浏览器中的谷歌翻译插件 会导致dom的结构发生改变，从而导致 vue react与dom操作绑定关系失效！其中（ 翻译input提示内容 无法翻译），需要在public 的添加css及js 已放置在。下面的方法可以使得我们即使用谷歌翻译 又不会导致dom结构发生改变 兼容vue react(把vue代码改写一下)框架。这两个组件都可以通过 添加 notranslate 类名，这样谷歌翻译将不会翻译该元素内文字。一般没有适配国际化的页面 我们会使用谷歌翻译插件进行翻译。demo 代码 如下。..
vuecli3有关i18n中英文切换问题
Weightlessly的博客
12-20 1261
1、npm安装 npm install vue-i18n 2、main.js配置 import VueI18n from 'vue-i18n'; Vue.use(VueI18n); //有关i18n const i18n = new VueI18n({ locale: 'zh',//表示默认的语言 修改全局locale值可以导入message中不同的包 messages: { 'zh': require('./lang/zh'), // 中文语言包 'en': require(
translate.js实现自动翻译页面（无需配置语言包）
qq_39923762的博客
05-22 3950
【代码】translate.js实现自动翻译页面（无需配置语言包）
vue国际化 自动百度翻译，优先本地语言库
oqqHeHe1234567d89的博客
12-06 3206
赖人国际化，自动百度翻译，优先本地语言 git地址: https://github.com/aafengjunjie/jj_languag 本次说明用vue-cli 3 来做示范。 安装： npm install jj_language --save 在main.js import language from 'jj_language' //list 和 directory...
基于 translate.js + Vue 实现的国际化语言翻译
2202_75337835的博客
10-17 1615
通过本文，我们了解了如何在 Vue 项目中结合实现轻量级的国际化翻译功能。相比于vue-i18n更加简洁，适合不需要复杂配置的项目。在实际项目中，可以根据需求进一步扩展和优化，例如支持更多语言、使用动态加载语言包等。希望这篇文章对您有所帮助！如果您有任何问题或建议，欢迎讨论！
Vue项目vue-i18n国际化/多语言问题——Angular-translate.js的闪烁问题
菜菜我是谁的博客
06-01 1047
@Vue项目国际化/多语言问题——Angular-translate.js的闪烁问题 前段时间项目要求做国际化多语言，其实多语言没有那么难，但是对于项目中的中文进行翻译和替换真是一个吃力不讨好的活，英文水平烂是一方面，多多少少在替换过程中漏这漏那的，真不叫人省心 vue项目中的多语言问题 //此方法是写在utils公共方法里面的 export function getLanguae() { //ie浏览器取navigator.userLanguage let languageInfo = n
Vue项目中实现国际化(i18n)翻译教程
在前端开发中，实现国际化是一项关键任务，特别是在构建多语言支持的官网、后台管理系统等应用时。Vue-i18n 是 Vue.js 生态系统中的一个流行国际化插件，它提供了便捷的方式来管理不同语言版本的文本。 首先，要...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值