vue3 里的 i18n 如何切换语言

最新推荐文章于 2024-09-30 15:04:10 发布

Z_ One Dream

最新推荐文章于 2024-09-30 15:04:10 发布

阅读量2.9k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42335036/article/details/116654454

版权

vue 专栏收录该内容

18 篇文章 3 订阅

订阅专栏

参考链接：https://vue-i18n.intlify.dev/guide/essentials/scope.html#local-scope-2

const i18n = createI18n({
  locale,
  default: 'zh-CN',
  messages: {
    'en-US': en,
    'zh-CN': cn
  }
})

i18n.global.locale = 'en-US'

把你创建的 i18n 引入之后，修改 i18n.global.locale 就可以实现语言切换了，真实超级简单

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Z_ One Dream

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue3中使用i18n实现中英文切换，引入封装+全局切换

布克吉的博客

08-06

865

前言名称由来：全称是 internationalization，插件名取了首字母 i 和尾字母 n，中间一共有 18 个字母，所以组合起来就叫 i18n。作用：通过手动配置多种语言的翻译，且可快速切换。正文开始↓。

14.vue国际化vue-i18安装和使用

weixin_38644630的博客

11-28

1467

13.vue国际化vue-i18n安装和使用说明：有一点基础的，可以只关注方法，没有基础的可以从我的前面文章查看，从零开始 1.安装vue-i18n 2.引入vue-i18n 在main.js中引入vue-i18n import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import './plugins/element.js' import

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

Vue3中使用i18n实现国际化(中英切换)

最新发布

jsbbhx的博客

09-30

367

目录结构─src├─locales└─lang└─en.js //英文语言包└─zh.js //中文语言包├─i18n.js //i18n注册。

Vue3使用i18n插件实现多种语言切换的功能

陈先生的博客

06-30

1517

i18n.ts为翻译文件的入口文件，此文件需引入全局main.ts文件内。index.ts为范围文件内容的导出文件。

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

波波不加冰的博客

06-19

630

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

vue3.2 i18n国际化

grow_的博客

02-26

507

1、安装 npm i vue-i18n@next 2、创建文件 @/i18n/index 设置使用 import { createI18n } from 'vue-i18n' import EN from './en' import ZH from './zh' // 数据源--不同的语言对应的内容 const messages = { en: { ...EN }, zh: { ...ZH } } // 设置当前的语言 const getCurrentLanguag

前端国际化之Vue-i18n源码分析

weixin_33912453的博客

03-19

1866

最近的工作当中有个任务是做国际化。这篇文章也是做个简单的总结。部分网站的当前解决的方案不同语言对应不同的页面。在本地开发的时候就分别打包输出了不同语言版本的静态及模板文件，通过页面及资源的url进行区分,需要维护多份代码。在线翻译统一模板文件，前端根据相应的语言映射表去做文案的替换。面对的问题语言标识谁来做？页面完...

使用vue 国际化i18n 实现多实现语言切换功能

10-17

特别是对于前端框架Vue.js，它已经具有支持国际化插件的能力，本文将重点介绍如何使用Vue的国际化库vue-i18n来实现多语言切换功能。首先，我们需要创建一个名为i18n的文件夹，在此文件夹内创建三个主要文件：en.js...

使用 vue-i18n 切换中英文效果

08-27

Vue-i18n 是 Vue.js 生态系统中的一个强大国际化插件，用于处理多语言环境。这个插件允许开发者轻松地在应用中切换不同的语言，从而实现内容的本地化。以下将详细介绍如何使用 Vue-i18n 实现中英文切换。首先，...

vue 国际化 vue-i18n 双语言语言包

08-27

在上面的代码中，我们使用 `$i18n.locale` 属性来获取当前语言模式，并根据当前语言模式来切换语言。 7. 在 JavaScript 中使用语言包在 JavaScript 中，我们可以使用 `$t` 函数来获取语言包的内容。例如： ```...

vue与vue-i18n结合实现后台数据的多语言切换方法

08-27

vue与vue-i18n结合实现后台数据的多语言切换方法本文将详细介绍如何使用vue和vue-i18n实现后台数据的多语言切换方法。通过结合使用vue和vue-i18n，我们可以实现后台数据的多语言切换，从而满足不同语言地区的需求...

i18n的一些源码

02-21

国际化的简单实现列子，对于初学者有一些帮助。

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

12-13

vue-i18n是一个vue插件，主要作用就是让项目支持国际化多语言，使用方便快捷，能很轻松的将我们的项目国际化。本文主要介绍使用vue-i18n实现切换中英文效果。安装vue-i18n 我们使用npm安装vue-i18n。 npm ...

vue3使用i18n实现国际化与动态切换语言

futao__的博客

07-18

1681

通过VUE指令和pinia控制按钮权限

在vue3+ts中配置全局vue-i18n

ben_grf的博客

03-21

1466

在tsconfig.json引入。`, //全局使用$t方法。

VUE3从i18n国际化组件动态获取字符串

nopyramid的博客

03-27

523

在js文件中通过computed方式获取（直接使用$t('button.query')方式是无法获取的）在vue文件的标签中通过以下方式直接获取。VUE3的字符串国际化可以通过以下方式实现。

vue项目 i18n 国际化完整教程

weixin_47192158的博客

09-01

3936

国际化对于跨国项目至关重要，因为它可以让项目适应不同国家的语言和文化，为不同客户提供更好的使用体验。具体而言，国际化可以让项目根据不同国家的语言进行翻译，并支持多语言切换，让不同国家的客户都能够方便地使用项目。这不仅可以提升项目的用户满意度，还能够扩大项目的市场范围，提高项目的商业价值。基本思路如下1. 安装语言包2. 定义语言包3. 在vue事例挂在 vue-i18n类对象下面具体讲解。

vue3 i18n 设置国际化语言切换

u014105655的博客

03-01

3135

vue3 i18n 设置国际化语言切换

徒手搭建VUE3项目(三)：i18n国际化

yingmd2020的博客

09-07

481

安装包 yarn add vue-i18n 配置根目录新增language文件夹，创建index.ts、ch.js、en.js、jp.js // index.ts import { createI18n } from "vue-i18n" export default createI18n({ locale: localStorage.getItem("language") || "ch", messages: { ch: require("./ch"),

vue3使用vue-i18n 切换语言

09-09

Vue3 中使用 Vue I18n 进行国际化的切换通常需要以下几个步骤： 1. 安装依赖：首先安装 `vue-i18n` 和相关的插件，如 `@vue/composition-api` 或者 `vue-class-component`，取决于你的项目结构和组件化方案。 ```...