vue-i18n，它的替代方案。$i18n使用组合api？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

Easy Vue 国际化 - Vue I18n 插件教程

Vue.js 是一个流行的 JavaScript 框架，它提供了一个名为 Vue I18n 的强大国际化（i18n）插件。...它提供了一个简单而灵活的 API，可将翻译集成到 Vue 组件中，这使得创建多语言应用程序几乎不费吹灰之力。有了 Vue I18n，您可以定义不同语言的翻译信息，并根据用户的地域轻松地在它们之间切换。...Vue I18n 会在每个组件中注入 t翻译API，让我们可以轻松访问翻译过的信息。下面是一个如何在模板中使用t 翻译 API，让我们可以轻松访问翻译过的信息。...下面是一个如何在模板中使用 t翻译API，让我们可以轻松访问翻译过的信息。...使用组合 API 除了前面示例中基于选项的 API 之外，Vue I18n 还有一个名为 Composition API 的功能，它提供了一种更灵活、更强大的翻译处理方式。

1.4K3 0

vue2升级vue3：vue-i18n国际化异步按需加载

因为可能一直用中文，那么就不会用到英文的数据,就没必要去加载。...只在请求的时候去加载它改动前代码import { createI18n } from 'vue-i18n';import dayjs from 'dayjs';import 'dayjs/locale/...，比如初始化只加载 fallbackLocale ，代码中注释的部分vue3使用vue-i18n 9.x ,相关方法在i18n.global.xxx但是这个加载包还是有些打，需要进一步拆分按模块或路由加载语言包这个优化有很多措施拆分模块之前的语言包全部是在一个...但是可以通过组合得到不同的js。然后在路由钩子里面，按需注入。...按需加载，异步调用 https://www.cnblogs.com/chenyi4/p/12409074.html十分钟入门前端最佳的语言国际化方案 https://zhuanlan.zhihu.com

2.3K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

vue2升级vue3：vue2 vue-i18n 升级到vue3搭配VueI18n v9

主要是Vue I18n v8.x 到Vue I18n v9 or later 的变化，其中初始化：具体可以参看：https://vue-i18n.intlify.dev/guide/migration/... = createApp({ // ... }) app.use(i18n)Reason: Vue 3 Global API changes, and Vue 3 API architecture...changes related for component instances.bkui-cli 创建的vue2项目（magicBox组件库升级vue2 "vue-i18n": "^8.26.8",import...;export default i18n;vue3"vue-i18n": "^9.1.10",import { createI18n } from 'vue-i18n';import dayjs from...;export default i18n;注意：globalInjection 为true使用注意事项：在vue模板()中与 defineComponent render 函数中直接使用this.

9691 0

深入浅出 vue-loader 自定义块

本文大纲：通过 vue-i18n 的 i18n> 了解 customBlocks 和基本配置；从源码层面了解 vue-loader 对 customBlocks 的处理 vue-i18n vue-i18n...如果使用 SFC 的方式写组件的话，可以在 .vue 文件中定义 i18n> 块，然后在块内写入对应的词条。这个 i18n 标签就是 customBlocks。...": "こんにちは、世界" } } i18n> 其他用法可以查阅使用文档[2]；要让 customBlock 起作用，需要指定 customBlock 的 loader，如果没有指定，对应的块会默默被忽略...-> 组合 loader -> 处理 block -> 组合每一个 block 的结果为最终代码的工作流，完成对 SFC 的处理。...参考资料 [1] vue-i18n: https://kazupon.github.io/vue-i18n/ [2] 使用文档: https://kazupon.github.io/vue-i18n/guide

1.3K1 0

Nuxt3+vue-i18n国际化（巨坑！！

官方文档有提供引入和使用方法。...nuxt3提供的i18n使用方法也是没什么用。也是第一次遇到官网示例没用的情况。...所以放弃了 nuxt/i18n如果有打开在使用@nuxtjs/i18n@next 没有问题麻烦指导一二vue-i18nvue-i18n github示例github示例中的代码可以完美应用。.../locales/*.json') ] }) ] }})plugins中将i18n在vue中使用配置好后在plugins目录下创建i18n.ts文件。...因为需要在plugins中将i18n挂到vue上|- plugins |-- i18n.ts|- i18n |-- zh.ts |-- en.tszh.ts en.ts 配置国际化匹配的内容

4.3K5 0

Supergraph：API编排和组合的解决方案

它具有挑战性，因为它通常跨越多个域。使用传统方法进行编排需要与聚合相同的“粘合”代码/端点——只是在这种情况下，这种粘合更复杂，正如我们从示例中看到的那样。...与 Camunda、Orkus、Temporal 等第三方编排软件的集成使开发人员的体验更加无缝。阅读有关API 编排的更多信息。问题解决方案新的工作流需要新的编排端点。...API 组合 API 组合可以被认为是 API 集成和编排的特殊情况（或演变），它指的是将多个 API 响应组合成单个统一响应的技术，该响应包含来自不同调用的分层信息。...获取这些信息涉及按顺序向三个不同的域发出请求，在每一步使用上一步的响应，最后将整个结果集组合成一个单一的层次化响应，该响应表示三个实体（订单、餐厅和支付）之间的关系。...嵌套过滤器: 从 A 获取数据，并根据其相关数据 B 的属性值进行过滤。问题解决方案每个数据组合排列都需要一个组合端点。 supergraph 通过跨来源数据的声明式关系定义来自动执行组合。

5041 1

Vue 3.0 遇到的问题

根据所使用的模式，适当的功能替换它： "history":createWebHistory() "hash":createWebHashHistory() "abstract":createMemoryHistory... 3、vue-i18n 使用据vue-i18n描述，vue-i18n很快将转移到合并组织..., createI18n } from "vue-i18n"; const i18n = createI18n({ locale: "zh-CN", messages, }); export {...：__VUE_OPTIONS_API__和__VUE_PROD_DEVTOOLS__，适当地配置它们能提高 tree shaking 的效果。...（没有试过Vue新提出的vite ）解决方案：使用 webpack.DefinePlugin 对它们进行编译时替换： const webpack = require('webpack'); plugins

2.1K1 0

使用WebRTC作为RTMP的替代方案

但是WebRTC也有自己的局限，它被设计用于基于浏览器的编码和小规模的流媒体传输，而这两个特点都使它无法适用于某些直播场景。 WebRTC会是替代RTMP的最佳方案吗？...正如我将在下文所解释的那样，它取决于你所使用的支持部署的技术和你想达成的目标。 RTMP vs....在视频生产方面，WebRTC仅使用Web浏览器就可以进行简单的直播，但是对于希望使用硬件或者软件解决方案控制编码设置的直播厂商来说，基于浏览器的编码并不理想。...目前你在传输视频时正在使用哪些流媒体格式？来源：Wowza的2021视频流延迟报告[3] 当涉及低延迟协议的替代方案，WebRTC是众多协议中传输速度最快的。...规模化的挑战：导致WebRTC在向成千上万（或更多）观众直播时很难使用。幸运的是，行业已经为以上问题找到了解决方法，使WebRTC成为了RTMP的强大替代方案（无论是在推流时还是在播放端）。

3.9K4 0

【Vue】Vue-i18n 变量使用以及采坑总结

我们 Vue 项目技术上采用了 Vue-i18n 这个库。今天就聊聊这个库的一个功能，在国际化时候使用变量。...使用 place 属性首先翻译的文案先改回最开始变量的版本 introTips: "I am {name}.I am from {region}" 直接使用 i18n 组件以及 place 属性...没错，官方推荐的最终的解决方案是 Slot，用法跟上面的非常相似最终的方案 ——Slot 直接上代码： i18n path="introTips" tag="div"> 的罪魁祸首阅读源码我看了一下 node_modules 中 vue-i18n 的源码，这里注意我目前使用的版本是 8.15.0 发现在 i18n 这个函数式组件的源码中有两句非常奇怪的代码...tag 了总结本文介绍了 vue-i18n 变量的使用方法，几种方法都较为简单易懂。

6.6K1 0

vite新建vue3项目及安装插件笔记

，动态路由，权限之类的，提供的 API 完全够用。... 安装 vue-i18n 国际化安装依赖： npm i vue-i18n 新建文件夹 i18n： //新建index.ts import { createI18n } from 'vue-i18n...目前的几个解决方案可以 GitHub 上面看看。新版的都得加-US，否则会有警告。...only used the component API....auto-import.d.ts', 安装了 tailwindcss 会导致 element 的 button 样式缺失了，解决方案一个是先引入 tailwind 再引入 element 的，但是自动引入的不好处理

1.1K2 0

苹果禁止在其所有产品上使用元宇宙它提供哪些替代方案？

据彭博社近日报道，该市场的利润预计将达到约8000亿美元。　　苹果公司是摆脱这种狂热的例外，它似乎不相信扎克伯格所提倡的元宇宙。...古尔曼强调，“元宇宙将被禁止在苹果的所有替代现实产品上使用。” 　　古尔曼解释说，“我被直接告知，像Meta推广的元宇宙一样的虚拟世界的想法对苹果来说是禁止的。” 　　...苹果公司将增强现实作为虚拟现实的替代品，这可能在其拒绝扎克伯格所倡导的元宇宙方面发挥了作用。...米洛在报告中提到，美国科技方面的策略分析师蒂姆·巴扎表示“虚拟现实非常适合游戏和某些市场使用，但苹果认为，提供可以强加于现实世界的增强现实数据是它应该投入大部分精力的地方。”...如果苹果想建立一家庞大的可穿戴设备公司，它需要拥有与元宇宙配合使用的设备。”

4052 0

初识ABP vNext（3）：vue对接ABP基本思路

开始我使用vue-element-admin[1]来作为模板，这个项目貌似很多人用，选择他的i18n[2]分支，因为我需要国际化功能。...同样的，本地化信息也可以通过/api/abp/application-configuration接口来获取： ?...vue-element-admin的国际化方案是通过 vue-i18n[4]来实现，你也可以直接在前端部分来做国际化，如果你只有一个前端应用的话，但是在后端做复用性更好一些。...，使用app作为模板，不需要UI，并且将Identity Server应用程序与API host应用程序分开，使用Entity Framework Core作为数据库提供程序，并指定连接字符串。...#使用多个数据库 [6]i18n: https://github.com/PanJiaChen/vue-element-admin/tree/i18n

3.4K5 0

TypeScript 接口合并，你不知道的妙用

但是不妨碍声明合并继续发光发热，本文就讲讲它几个有趣的使用场景。...但是两个库大部分的实现是一致的，这些共性部分就提取到 i18n-shared ：然而 i18n-shared 并不耦合 Vue 和 vue-i18n 的版本，也不可能将它们声明为依赖项，那么它相关...API 的类型怎么办呢？...*/ install(app: VueApp): void; // vue-i18n 的实例 i18n: VueI18nInstance; // ... /** * 获取全局实例...现在 i18n 和 i18n-legacy 就可以根据自己的依赖环境来配置它了： i18n-legacy: import VueI18n from 'vue-i18n'; // vue-i18n@8 import

1.5K4 0

基于tauri+vue3后台管理软件TauriAdmin

^1.63.6图表组件：echarts^5.4.2国际化方案：vue-i18n^9.2.2编辑器组件：wangeditor^4.7.15pinia缓存插件：pinia-plugin-persistedstate...^3.1.0图片特性最新跨端技术tauri1.4基于前端技术vite4、vue3、pinia、vue-router、vue-i18n支持中文/英文/繁体多语言解决方案支持动态路由权限验证支持路由缓存功能.../** * 处理渲染器进程到主进程的异步通信 */import { WebviewWindow } from '@tauri-apps/api/window'import { emit } from '...pinia替代vuex进行状态管理。...vue-i18n进行多语言管理。

1.6K7 0

Vue + Element UI 实现权限管理系统前端篇（五）

yarn add vue-i18n $ yarn add vue-i18n yarn add v1.9.4 warning package-lock.json found....index.js import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) // 注册i18n实例并引入语言文件，.../i18n' Vue.config.productionTip = false Vue.use(ElementUI) Vue.use(api) new Vue({ el: '#app',...i18n, router, render: h => h(App) }); 3.字符引用在原本使用字符串的地方，引入国际化字符串。...把原本的“用户管理”、“菜单管理”等字符串换成如下格式引入。 ? 3.切换菜单在用户信息前边添加一个用于语言切换的菜单，用于切换不同的语言。 ? 菜单语言切换的时候，修改国际化的设置 ?

1.3K2 0

搭建后台管理系统的思路

页面他是两栏布局的，一栏是我们的侧边导航栏，侧边栏如何完成这个两栏布局可以使用 float 可以使用弹性布局 display: flex 也可以使用定位侧边导航栏，可能我们需要来研究 element-ui...需要注意是否需要点击跳转的，定位到那一级菜单的问题需要研究 Breadcrumb 面包屑关闭展开侧边栏按钮需要使用 vuex 来存储打开与否的这个状态值，通过 vuex 来更改状态 AppMain.vue...这样的插件就需要研究官网文档了 vue-i18n 有一个 vite 多语言插件 intlify/vite-plugin-vue-i18n vite.config.js 配置 import path...} } i18n> 当然，可以在 main.js 引入多语言 import { createApp } from 'vue' import { createI18n } from 'vue-i18n...' /* * The i18n resources in the path specified in the plugin `include` option can be read * as vue-i18n

3.4K2 0

前端国际化辅助工具——自动替换中文并翻译

它具有以下功能：根据你提供的默认映射数据（{ 中文：变量 }），i18n-replace 会把中文替换成对应的变量。如果没有提供映射数据，则使用默认规则替换中文并生成变量。...将替换出来的中文自动翻译成目标语言（默认为 en，即英语）。自动翻译功能使用的是百度免费翻译 API，每秒只能调用一次，并且需要你注册百度翻译平台的账号。...: '$t', // i18n 插件前缀例如 vue-i18n: $t， react-i18next: t include: [], // 需要翻译的目录或文件 exclude: []...所以如果你有默认的映射文件，请提供它的地址。...例如 vue-i18n 国际化工具使用的是 $t，而 react-i18next 使用的是 t。 translation 是否需要自动翻译，默认为 false。

4.1K3 0

vue多语言插件vue-i18n使用介绍

感觉6b的不要不要的，下面来看看vue怎么来实现这个操作了？（其实很简单） ?...详细步骤安装vue-i18n npm install vue-i18n -S 引入在main.js中引入vue-i18n import VueI18n from 'vue-i18n' Vue.use...' } } } vue-i18n初始化 const i18n = new VueI18n({ locale: 'cn', // 默认语言 messages }) vue-i18n挂载到...vue实例 new Vue({ el: '#app', router, i18n, // i18n template: '', components: { App } }...) vue模板文件中使用 {{ $t("message.hello") }} js中使用 computed:{ hello(){ return this.

1.7K3 0

《vue3+ts+element-plus 后台管理系统系列》之国际化

vue3-composition-admin 是一个管理端模板解决方案，它是基于vue3,ts和element-plus，项目都是以composition api风格编写。...composition api风格，需要最新兼容。...思路理解 ---- 准备好语言包messages，包含自己建的en.ts,zh-cn.ts 和 element-plus语言包当前选择locale 创建i18n 放在 plugins 自动加载代码实现...创建i18n实例，并使用 const i18n = createI18n({ locale: getLocale(), messages: messages }) export default...i18n app.use(i18n) 4.使用国际化语言模板： {{ t('key') }} ts: setup() { const {

2.7K2 0

【源码】Vue-i18n: 你知道国际化是怎么实现的么？

Vue-i18n 简单介绍以及使用大家好，我是 Gopal。目前就职于 Shopee，一家做跨境电商的公司，因为业务涉及到多个国家，所以我们各个系统都会涉及到国际化翻译。...$mount('#app') 使用上是比较简单的，本文我们深入了解 Vue-i18n 的工作原理，探索国际化实现的奥秘。...包括：整体的 Vue-i18n 的架构是怎样的？上述 demo 是如何生效的？我们为什么可以直接在模板中使用 $t？它做了什么？上述 demo 是如何做到不刷新更新页面的？...$i18n // 代理模式的使用 return i18n._t(key, i18n.locale, i18n....$i18n.t(path, ...makeParams(locale, args)) } 在 unbind 的时候会清空 textContent 全局组件 i18n i18n 函数式组件使用如下：

3.6K4 0

点击加载更多

Easy Vue 国际化 - Vue I18n 插件教程

vue2升级vue3：vue-i18n国际化异步按需加载

vue2升级vue3：vue2 vue-i18n 升级到vue3搭配VueI18n v9

深入浅出 vue-loader 自定义块

Nuxt3+vue-i18n国际化（巨坑！！

Supergraph：API编排和组合的解决方案

Vue 3.0 遇到的问题

使用WebRTC作为RTMP的替代方案

【Vue】Vue-i18n 变量使用以及采坑总结

vite新建vue3项目及安装插件笔记

苹果禁止在其所有产品上使用元宇宙它提供哪些替代方案？

初识ABP vNext（3）：vue对接ABP基本思路

TypeScript 接口合并，你不知道的妙用

基于tauri+vue3后台管理软件TauriAdmin

Vue + Element UI 实现权限管理系统前端篇（五）

搭建后台管理系统的思路

前端国际化辅助工具——自动替换中文并翻译

vue多语言插件vue-i18n使用介绍

《vue3+ts+element-plus 后台管理系统系列》之国际化

【源码】Vue-i18n: 你知道国际化是怎么实现的么？

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐