- 综合排序
- 最热优先
- 最新优先
- 来自专栏全栈程序员必看
Vue-i18n 国际化
基本使用 安装 npm install –save vue-i18n 创建lang 文件夹 index.js中引入 i18n并使用 import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n = new VueI18n({ // 设置当前语言 locale: 'zh', messages {$t('name')}} 文件拆分 一般文件字段量很大，需要拆分文件 index.js中引入 import Vue from 'vue' import VueI18n from 'vue-i18n navigator.language能够获取当前浏览器的语言环境zh-CN是中文，en-US是英文 lang文件index.js import Vue from 'vue' import VueI18n from 'vue-i18n element-ui import elementUi from 'element-ui' //引入css import 'element-ui/lib/theme-chalk/index.css' //引入vue-i18n
96810编辑于 2022-08-15 - 来自专栏coding个人笔记
vue国际化vue-i18n简单使用
当然是直接用插件了，并不是自己实现 vue-i18n使用很简单： 安装依赖：npm i vue-i18n -S 引入、调用： import VueI18n from 'vue-i18n'; Vue.use 当然，vue-i18n还提供了其他属性和方法，只是官网我打不开，没办法多说一些。 element-ui也是通过切换语言文件实现的。
1.1K10发布于 2020-09-14 - 来自专栏前端杂货铺-Gopal
【Vue】Vue-i18n 变量使用以及采坑总结
我们 Vue 项目技术上采用了 Vue-i18n 这个库。 今天就聊聊这个库的一个功能，在国际化时候使用变量。 然后我在报错的地方打了一个断点，可以看到下面 children 中数组的各项并不都是 vnode，第一项就是字符串，这应该就是导致报错的罪魁祸首 阅读源码 我看了一下 node_modules 中 vue-i18n /blob/v8.15.0/src/components/interpolation.js#L42 [2]链接: https://github.com/kazupon/vue-i18n/blob/v8.22.0 /src/components/interpolation.js [3]PR: https://github.com/kazupon/vue-i18n/pull/878 [4]Issue: https: //github.com/kazupon/vue-i18n/issues/876 [5]链接: https://app.mokahr.com/apply/shopee/2963#/
6.7K10编辑于 2022-08-01 - 来自专栏web秀
vue多语言插件vue-i18n使用介绍
详细步骤 安装vue-i18n npm install vue-i18n -S 引入 在main.js中引入vue-i18n import VueI18n from 'vue-i18n' Vue.use Chinese' } }, // 繁体中文 tw: { message: { hello: '你好', author: '龍的傳人' } } } vue-i18n 初始化 const i18n = new VueI18n({ locale: 'cn', // 默认语言 messages }) vue-i18n挂载到vue实例 new Vue({ el: $i18n.locale = 'en' // 切换英文 单独定义语言文件 并加载到vue-i18n初始化中 // cn.js export default { message: { hello
1.7K30发布于 2019-09-04 - 来自专栏张恒的网络日志
vuejs国际化插件vue-i18n的使用
vue-i18n引入 vuejs官方的国际化插件推荐中，vue-i18n是相对来说入侵代码最小的，也是最容易上手的。 那么，从哪里引入vue-i18n呢？ <script src="https://cdn.bootcss.com/<em>vue-i18n</em>/7.0.0/vue-i18n.js"></script> <script src="https://cdn.bootcss.com
2.5K20发布于 2020-04-28 vue-i18n 插件的命名插值打包后失效
今天我的工具网站增加了一个新功能——图片工具箱，但一发布就发现了一个严重问题：i18n 的命名插值没有效果。
97910编辑于 2024-06-12- 来自专栏crmeb
vue-i18n国际化语言在项目中的使用
目前在各大商城项目中，对于国际化语言的需求越来越高了，其中最多的就是vue项目使用i18n插件实现多语言切换功能，最近有幸我刚好做了这方面的业务，下面是我对vue-i18n国际化语言的一点总结与记录正文项目中通常通过选择语言 1.引入多语言首先在main.js中进行引入并注册vue-i18n，引入中文语言包和英文语言包（根据开发需求引入语言包）//main.js//多语言引入import VueI18n from 'vue-i18n'import /zh-Hans.json'import Vue from 'vue'; import VueI18n from 'vue-i18n'Vue.use(VueI18n)const i18n = new VueI18n
1.8K50编辑于 2022-08-12 - 来自专栏Java学习网
在Vue中如何处理国际化(i18n)需求？分享一下实践经验
在Vue中处理国际化需求，可以借助于Vue的插件vue-i18n来实现。下面将分享一些我在处理国际化需求时的实践经验。 1、安装和配置vue-i18n： 首先，需要安装vue-i18n插件。 在项目的根目录下使用npm或yarn命令进行安装： npm install vue-i18n 然后，在Vue应用的入口文件（通常是main.js）中引入并配置vue-i18n： import Vue from 'vue' import VueI18n from 'vue-i18n' import messages from '. vue-i18n插件提供了i18n.locale属性和i18n.setLocale方法来实现语言切换。 vue-i18n提供了this.$t方法的第二个参数，可以传入一个对象来替换翻译内容中的占位符。
1.5K10编辑于 2024-06-14 - 来自专栏云前端
[译] 在 vue-test-utils 中 mock 全局对象
这通常包括： $store, for Vuex $router, for Vue Router $t, for vue-i18n 以及其他种种。 vue-i18n 的例子 我们来看一个 vue-i18n 的例子。虽然可以为每个测试用到 createLocalVue 并安装 vue-i18n，但那样可能会让事情难以处理并引入一堆样板。 首先，组件 <Bilingual> 用到了 vue-i18n: <template>
{{ $t("helloWorld") }}</template ><script> export default { name: "Bilingual" } </script> 你先在另一个文件中弄好翻译，然后通过 $t 引用，这就是 vue-i18n 的工作方式 $t is not a function" 这是因为我们并未安装 vue-i18n，所以全局的 $t 方法并不存在。2.1K10发布于 2020-06-15 - </template><script setup lang="ts">import { useI18n } from 'vue-i18n'const来自专栏Coooooooooode！（前端）
Nuxt3+vue-i18n国际化（巨坑！！
安装依赖安装@intlify/unplugin-vue-i18n 和 vue-i18n两个依赖npm i @intlify/unplugin-vue-i18n vue-i18n配置nuxt.config.tsimport nuxt.com/docs/api/configuration/nuxt-configexport default defineNuxtConfig({ build: { transpile: [/vue-i18n /]}, vite: { resolve: { alias: { 'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js |-- en.tszh.ts en.ts 配置国际化匹配的内容export default { home: '主页',}i18n.tsimport { createI18n } from 'vue-i18n'import en">English</option> </select>
4.3K50编辑于 2025-08-06
Vue项目实战05：18n实现多语言自动切换-浏览器语言设置「建议收藏」
什么是vue-i18n i18n是 Internationalization 这个英文的简写，即国际化的意思，vue-i18n是一款针对于vue开发的国际化插件,让项目支持多语言切换，以适应不同地区用户的需求 安装vue-i18n 直接在项目中执行安装命令：npm install vue-i18n --save 全局引入vue-i18n 在项目中引入vue-i18n，实例化vue-i18n将需要加载的语言包通过 下建lang文件夹—-用来存放自己设置的多语言文件 index.js 入口文件 index.js里放置内容如下 import Vue from 'vue' import VueI18n from 'vue-i18n
【源码】Vue-i18n: 你知道国际化是怎么实现的么？
Vue-i18n 简单介绍以及使用 大家好，我是 Gopal。目前就职于 Shopee，一家做跨境电商的公司，因为业务涉及到多个国家，所以我们各个系统都会涉及到国际化翻译。 包括： 整体的 Vue-i18n 的架构是怎样的？ 上述 demo 是如何生效的？ 我们为什么可以直接在模板中使用 $t？它做了什么？ 上述 demo 是如何做到不刷新更新页面的？ 其中左侧是 Vue-i18n 提供的一些方法、组件、自定义指令等能力，右侧是 Vue-i18n 对数据的管理 ? 这里谈谈 escapeParams，其实是 Vue-i18n 为了防止 xss 攻击做的一个处理。 从 Vue-i18n 中，我学习到了 国际化翻译 Vue-i18n 的架构组织和 $t 的原理，当遇到插值对象的时候，需要进行 parse 和 compile Vue-i18n 通过转义字符避免 XSS
vue2升级vue3：vue2 vue-i18n 升级到vue3搭配VueI18n v9
vue-i18n.intlify.dev/guide/migration/breaking.htmlVue I18n v8.x:import Vue from 'vue' import VueI18n from 'vue-i18n i18n, // ... })Vue I18n v9 or later:import { createApp } from 'vue' import { createI18n } from 'vue-i18n Vue 3 API architecture changes related for component instances.bkui-cli 创建的vue2项目（magicBox组件库升级vue2 "vue-i18n ": "^8.26.8",import Vue from 'vue';import VueI18n from 'vue-i18n';import chineseJson from '.. ": "^9.1.10",import { createI18n } from 'vue-i18n';import dayjs from 'dayjs';import 'dayjs/locale/zh-cn
Vue I18n 在 Vuetify 项目中使用
官网 http://kazupon.github.io/vue-i18n/zh/introduction.html https://vuetifyjs.com/en/features/internationalization 安装 cdn <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/<em>vue-i18n</em> /dist/vue-i18n.js"></script> npm npm install vue-i18n yarn yarn add vue-i18n vue-i18n 在 vue 单页面中使用 DOCTYPE html> <html> <head> <title>vue-i18n</title> </head> <body>
【源码】Vue-i18n: 你知道国际化是怎么实现的么？
Vue-i18n 简单介绍以及使用 大家好，我是 Gopal。目前就职于 Shopee，一家做跨境电商的公司，因为业务涉及到多个国家，所以我们各个系统都会涉及到国际化翻译。 包括： 整体的 Vue-i18n 的架构是怎样的？ 上述 demo 是如何生效的？ 我们为什么可以直接在模板中使用 $t？它做了什么？ 上述 demo 是如何做到不刷新更新页面的？ 其中左侧是 Vue-i18n 提供的一些方法、组件、自定义指令等能力，右侧是 Vue-i18n 对数据的管理 入口文件为 index.js，在 VueI18n 类中的 constructor 中先调用 这里谈谈 escapeParams，其实是 Vue-i18n 为了防止 xss 攻击做的一个处理。 从 Vue-i18n 中，我学习到了 国际化翻译 Vue-i18n 的架构组织和 $t 的原理，当遇到插值对象的时候，需要进行 parse 和 compile Vue-i18n 通过转义字符避免 XSS
关于pureChat代码学习（1）--国际化的设置，全局自动化注册组件
本项目是用了element-plus和vue-i18n 区别：element-plus的国际化仅仅只设置对应组件库里面的文字，vue-i18n是针对项目中的 思路： 将对应的国际化的语言包，模块化的方式写在一个 对于element的只需要导入并通过获取本地存储的local的语言类型进去对象选取 对于本地存储拿数据或者一系列操作可以封装成函数，以便于代码整洁性，对外暴露可执行的对象方法 配置vue-i18n
Vue I18n 实现多语种
公司疫情监测终端管理平台需要国际化，于是我找到了vue-i18n。 安装 yarn add vue-i18n 引入 import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) main.ts
vue2升级vue3：vue-i18n国际化异步按需加载
只在请求的时候去加载它改动前代码import { createI18n } from 'vue-i18n';import dayjs from 'dayjs';import 'dayjs/locale/ .chineseJson }, //****n },});export default i18n;这个文件n多，堆叠起来体积也不少改动后import { createI18n } from 'vue-i18n changLang(currentLang);export default i18n;这样就可以了注意事项由于是异步加载，比如初始化只加载 fallbackLocale ，代码中注释的部分vue3使用vue-i18n loadLanguageAsync参考文章：vueI18n 多语言文件按需加载：https://blog.csdn.net/yujin0213/article/details/119137798vue 多语言 vue-i18n www.cnblogs.com/chenyi4/p/12409074.html十分钟入门前端最佳的语言国际化方案 https://zhuanlan.zhihu.com/p/144717545转载本站文章《vue2升级vue3：vue-i18n
初识ABP vNext（6）：vue+ABP实现国际化
ABP后端支持的是本地化，而vue-element-admin支持的是国际化，使用vue-i18n实现；本文默认它两者是一回事。 前面的章节中，已经大概分析了vue+ABP国际化的实现思路。 (error); }); }); } }; src\lang\index.js： import Vue from "vue"; import VueI18n from "vue-i18n 这跟直接在前端做国际化有一点区别就是，后者的文本信息是写在前端，vue-i18n可以直接使用。而这里只是把文本信息改到后端，从后端获取后再设置到i18n中，本质是一样的。 接下来只需要把界面上对应的文本使用vue-i18n的$t()方法渲染就好了，比如： ? 前端需要改动的地方比较多，但都是类似的修改。。。直接看效果： ? ? ? 而vue-i18n是支持多层级的： ? 所以ElementUI的这部分文本还是放在前端了。 最后 本篇关于vue+ABP实现国际化就介绍完了。。。
Vue 3.0 遇到的问题
: "^4.0.0-rc.3" //or 在index.html中引用 <script src="https://unpkg.com/vue-router@next"></script> 3、vue-i18n 使用 据vue-i18n描述，vue-i18n很快将转移到合并组织。 问题：vue-i18n will soon be transferred to intlify organization. After that, it will be developed and maintained on intlify ， 详情见 这里 原先写法： import VueI18n from 'vue-i18n i @intlify/vue-i18n-loader //使用 import messages from "./404"; import { useI18n, createI18n } from "vue-i18n
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号