【vue系列】i18n监听中英文变化

最新推荐文章于 2024-04-30 17:48:58 发布

原创最新推荐文章于 2024-04-30 17:48:58 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue.js 专栏收录该内容

85 篇文章

订阅专栏

这个博客主要展示了如何监听并响应i18n的locale变化，当语言环境切换为'zh-CN'时，会打印'zh'，而切换到'en-US'则打印'eh'。内容涉及国际化的动态更新和不同语言环境的处理。


watch: {
    '$i18n.locale'(newValue) {
      console.log('zha')
      if (this.$i18n.locale === 'zh-CN') {
        console.log('zh')
      } else if (this.$i18n.locale === 'en-US') {
        console.log('eh')
      }
    }
  },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

2025专业AI写手!

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue项目使用i18n插件实现多语言切换功能

qq_26780317的博客

07-15

1万+

前言：在一些网站经常可以看到切换语言包，将网站转化成多种语言版本的情况。最近项目中，也涉及到项目语言国际化的需求，在此记录一下。一、实现思路 web项目多语言(i18n，即国际化)是比较常见的需求，常规的做法大概有以下几种： 1.每种语言单独开发页面，适用于CMS之类的网站； 2.多语言文本和页面结构分离，运行时动态替换，适用于单页应用(SPA); 3.直接用网页翻译插件，机器翻译。这种效果不太理想，同时也有一些局限性。各个方案遇到的问题： 1.现在网上比较通用的，就是使用vue-i18n插件。这个插件

关于在自行封装的组件库中（使用vue-class-component）使用Vue-i18n无法正常翻译的解决办法

Wrysmile0308的博客

07-05

1202

大家或多或少都用过别人封装的组件库，甚至有人或者公司内有自行封装的一些公用组件库，而国际化翻译现在已经是各大项目中必不可少的一个插件了，但组件库中使用i18n进行翻译的时候可能遇到过以下这种问题，希望我的一点分析可以帮到你们。

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

vue监听i18n语言切换

Meetyouhere的博客

01-07

2959

当某个页面的中英文内容是变化的，可以存储到数据库，然后根据不同的语言判断取不同的值 watch: { '$i18n.locale'(newValue) { if (this.$i18n.locale === 'zh-CN') { } else if (this.$i18n.locale === 'en-US') { } } } ...

【vue随笔】监听i18n中英文切换变化

MurasakiSeiFu的博客

06-10

1389

vue监听i18n中英文切换变化

vue3+vue-i18n 监听语言的切换

一只爱吃糖的小羊

08-07

1834

在切换语言的时候在几个页面中需要做出一些自定义的行为，所以需要监听语言的变化

监听i18n中英文切换变化

你的小可爱的博客~

05-30

423

watch: {},

vue i18n实现语言切换

weixin_43817709的博客

05-30

903

1.使用vue-i18n实现语言切换,需要安装vue-i18n，使用cookie记录用户选择的语言，需要安装cookie npm install vue-i18n npm install js-cookie 2.新建lang文件，然后在该文件夹新建lang.js,封装setLang()和getLang()方法，用来把用户选择的语言存取到cookie export default {...

vue-i18n实现中英文切换的方法

10-15

在本文中，我们将深入探讨如何使用vue-i18n来实现中英文切换，以满足国际化的需求。首先，你需要在项目中安装vue-i18n。你可以通过npm命令行工具来安装： ```bash npm install vue-i18n ``` 接下来，我们需要...

利用vue-i18n实现多语言切换效果的方法

10-16

在进行国际化多语言切换的开发过程中，Vue.js作为一款流行的前端框架，提供了一个名为vue-i18n的插件，使得实现多语言切换变得便捷和高效。vue-i18n插件的核心功能是让开发者能够为Vue应用添加多语言支持，并轻松地...

Vue 中英文切换(vue-i18n)结合elementUI

sunshineTing2的博客

01-19

1203

项目中需要用到中英文切换，这里用到vue-i18n插件，配合localStorage使用第一步：下载包 vue-i18n npm install --save vue-i18n 第二步：在main.js中引入 vue-i18n包 import VueI18n from "vue-i18n"; Vue.use(VueI18n) // Create VueI18n instance with options const i18n = new VueI18n({ locale: localStorage

vue使用i18n实现国际化的方法详解

12-10

在`watch`对象中，我们监听`language`的变化，并将其值设置为`$i18n.locale`，从而实现语言切换。通过这种方式，Vue应用可以根据用户的选择动态地改变显示的语言，为用户提供更个性化的体验。记住，要确保所有需要...

vue 匹配键盘输入_vue 移动端键盘搜索事件监听(转)

weixin_33737110的博客

01-13

826

前言：KeyPress 和KeyDown 、KeyPress之间的区别虽然从字面理解, KeyDown是按下一个键的意思, 但实际上二者的根本区别是, 系统由KeyDown返回键盘的代码, 然后由TranslateMessage函数翻译成成字符, 由KeyPress返回字符值. 因此在KeyDown中返回的是键盘的代码, 而KeyPress返回的是ASCII字符. 所以根据你的目的, 如果只想读取...

在vue3 中使用vue-i18n 实现 DataV 轮播表国际化切换

atanming1的博客

04-30

518

主要原因是vue-i18n并不会对setup内的数据进行一个监听，仅仅只是重新渲染html的内容，因此在这里需要使用computed或者watch来对相关数据进行监听，或者直接window.location进行初始化。其中静态文字直接在中使用{{t(参数名)}}就可以进行切换，但是dv-scroll-board中的表头数据却并且切换。但是问题在于，我不希望重新调用接口，而轮播表的组件参数，如果整体使用computed来监听就会导致表单内容清空，因此需要将组件参数进行处理。

通过 VUE watch监听实现中英文切换时元素样式改变

qq_42341171的博客

11-20

2070

通过 VUE watch监听实现中英文切换时元素样式改变 1.前言 1.写项目的时候遇到的问题：新写的网页有中英文切换功能，但是当我切换成英文的时候，文本如果给定宽度，那么有时候翻译成英文文本会过长导致换行，可能会将原本下面的元素往下挤，所以我想要实现如下功能：一个元素有两套样式，当我进行中英文切换的时候样式也随之进行切换。 2.实现之前有试过通过v-bind动态绑定style或class实现样...

记录使用vue-i18n实现项目的双语国际化

weixin_45313351的博客

12-15

1747

本文是使用vue2.x + ant-design-vue 搭建的项目，对于框架使用不会做过多的说明以下是需要思考的问题1、如何使用vue-i18n？2、互译的语言数据存放在哪里合适？3、ant-design-vue如何国际化？4、如何全局监听切换了语言？5、语言的不同如何兼容样式？

记录vue国际化i18n的使用

feinifi的博客

02-29

1004

vue框架如果考虑多语言，可以使用vue-i18n，安装的话，直接通过npm install vue-i18n --save将依赖库加入到当前vue项目中。另外，我们需要配置多语言文件，这里以中文和英文为例，我们在assets目录下新建languages目录，然后新建zh.json和en.json，分别用于存放各自语言对应的国际化文件。多语言文件既然是json格式，自然可以包含...

记录一下vue如何利用vue-i18n实现实现国际化的经验（中英文切换）

hanxiongwei的博客

09-04

5404

手机端运用vue要做国际化，作为小白，记录一下，有可能使用的不对，拜托请指出来，谢谢，共同进步步骤一：安装vue-i18n npm install vue-i18n --save 步骤二：main.js文件的配置，在main.js中添加以下跟vue-i18n的使用有关的配置项 step1，引入i18n国际化插件 import VueI18n from 'vue-i18n' Vue...

vue项目国际化 vue-i18n以及踩坑解决小姐姐手把手教你VUE国际化~

最新发布

03-25

### 如何在 Vue-i18n 中设置和管理语言包为了在 Vue-i18n 中设置和管理语言包，可以按照以下方式进行操作： #### 安装 Vue-i18n 首先，在项目中安装 `vue-i18n` 插件。可以通过 npm 或 yarn 来完成这一过程： ```bash npm install vue-i18n # 或者 yarn add vue-i18n ``` 这一步骤是为了引入必要的依赖项以便后续配置国际化功能[^1]。 #### 创建语言包文件夹通常情况下，会创建一个专门用于存储语言资源的目录结构。例如，在项目的 `src` 文件夹下新建名为 `locales` 的子文件夹，并在此基础上定义每种语言对应的 JSON 文件或 JavaScript 对象形式的语言包数据。对于中文 (Chinese)，可命名为 `zh.js`；而对于英文 (English)，则命名为 `en.js`。这些文件的内容应该是一个键值对集合，表示各个需要被翻译成目标语言的文字片段[^3]。 #### 初始化 Vue-i18n 实例接着，在入口文件（通常是 main.js 或类似的初始化脚本）中导入已准备好的语言包以及核心库本身之后，调用其工厂函数来实例化一个新的 i18n 对象。下面展示了一段典型的代码示例： ```javascript import { createApp } from 'vue'; import { createI18n } from 'vue-i18n'; // 导入语言包 import zh from './locales/zh'; import en from './locales/en'; const app = createApp(App); const i18n = createI18n({ legacy: false, locale: navigator.language || 'zh', // 设置默认语言环境 fallbackLocale: 'zh', messages: { zh, en } }); app.use(i18n); app.mount('#app'); ``` 这里特别注意设置了参数 `legacy:false`, 这是因为从版本9开始推荐使用组合式API(composition API)[^4], 并且指定了初始使用的区域设定(`locale`) 和回退方案 (`fallbackLocale`)。 #### 动态切换语言如果希望允许用户自行更改界面所呈现的具体语种，则还需要额外编写逻辑处理这部分交互行为。比如监听某个按钮点击事件触发改变当前活动状态下的 language code: ```javascript function changeLanguage(langCode){ this.$i18n.locale = langCode; } ``` 以上就是有关于如何利用 Vue-I18N 组件来进行多国语言适配的主要流程概述[^2]. ---