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

原创

已于 2022-02-28 16:35:21 修改 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#中英文切换 #vue #语言

于 2021-01-19 15:43:53 首次发布

本文介绍了如何在Vue项目中实现中英文切换功能，通过vue-i18n插件与elementUI结合，详细阐述了从下载安装、引入包、配置文件、在组件中使用，到实现语言切换方法和监听语言变化的六个步骤。

项目中需要用到中英文切换，这里用到`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.getItem('locale') || 'cn', // 语言标识
  messages:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zlting~

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue2 elementUI vue-i18n国际化 中英文切换

xiaodebufuyan的博客

08-07

391

elementui国际化 vue-i18n

vue使用vue-i18n实现国际化

前端菜鸡的博客

09-19

1154

②在 i18n 目录下创建 langs 文件夹和 index.js文件，具体如下。4、为了方便使用，添加了个hooks文件，可以在vue页面引用此文件获取当前语言。2、index.js代码如下，这里使用了较多语言，具体按项目定。2、setup中使用，这里使用的vue2.6，和其他会有些差别。我使用的是vue2.6版本，具体使用其他版本可以进行修改。3、zh.js文件实例，其他语言文件按这格式不变。①在src下创建 i18n 目录。1、template模板使用。5、main.js配置。

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

vue＋element实现中英文切换

周金鱼啊

10-22

3160

1、安装 vue-i18n依赖 yarn add vue-i18n 或者 npm install vue-i18n --save-dev 2、在src下新建文件夹language，并在文件夹language下新建zh.js、en.js、index.js文件【src/language/zh.js】 module.exports = { language: { name: 'English' }, user: { login:'登录',

vue-translator:一个致命的简单的i18n转换插件，适用于Vue，可用于服务器端渲染

05-17

译者一个致命的简单的i18n转换插件，适用于Vue，可用于服务器端渲染。演示版客户端渲染： : 服务器端渲染： : （）用法 yarn add vue-translator 基本用法 import Vue from 'vue' import VueTranslator from 'vue-translator' Vue . use ( VueTranslator , { locale ?: string , // set it on initialize or before first rendering translations ?: { // If you want to define translations in component only, no need to set it on initialize [ locale : string

vue2使用国际化vue-i18n详解+ES6的import和export区别

热门推荐

m0_52669454的博客

11-05

1万+

vue2使用国际化vue-i18n详解+ES6的import和export区别

Vue项目引入translate.js 国际化自动翻译组件

weixin_46607967的博客

11-15

1万+

建议 translate.js 配合 i18 使用本文只介绍 translate.js 的引入和使用方式无论什么库在翻译上都不会做到（ 100%翻译 && 100%准确）所以不要吹毛求疵。

使用 vue-i18n 切换中英文

仗剑天涯，从摘要开始

10-12

1074

vue-i18n 仓库地址：https://github.com/kazupon/vue-i18n 兼容性：支持 Vue.js 2.x 以上版本安装方法：（此处只演示 npm） npm install vue-i18n 使用方法： 1、在 main.js 中引入 vue-i18n （前提是要先引入 vue） import VueI18n from 'vue-i18n' Vue.use(VueI18n) 2、准备本地的翻译信息 const messag...

vue中英文切换组件封装（vue-i18n超详细版）

我好菜啊

03-11

1040

写了好几次中英文切换，每次重新写都要去翻之前的项目代码来cv，提取出来记录一下以下方向仅供参考。

Vue-i18n 国际化学习笔记

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

09-28

2495

通过上述内容，我们不仅了解了如何在Vue.js项目中使用Vue-i18n进行国际化，还学习了如何解决常见的问题及一些实用的技巧。Vue-i18n 是一个Vue.js的国际化插件，它提供了一种简单的方式来处理应用中的多语言支持。通过这个插件，我们可以轻松地在应用中切换语言，支持多种语言的翻译，并且可以处理日期、数字等多种类型的格式化。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。在Vue应用中使用i18n实例，并在模板中展示国际化消息。

【vue+vue-i18n插件】实现vue项目中英文切换

花椒和蕊的博客

12-06

1572

v18n插件笔记

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-i18n 切换中英文效果

08-27

主要介绍了使用 vue-i18n 切换中英文效果，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下

vue translate peoject实现在线翻译功能【新手必看】

08-27

主要介绍了vue translate peoject实现在线翻译功能，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

VUE实现在线翻译11111

08-03

用VUE-cli 2.0实现简单的在线翻译主要就是熟悉VUE框架的使用

vue-polyglot-Vue.js 2的基本翻译插件，具有异步加载功能。-Vue.js开发

05-27

VueJS 2+的基本翻译插件Vue-Polyglot注释Vue-Polyglot在版本2+中不会异步翻译这不是int VueJS 2+的基本翻译插件的插件Vue-Polyglot注释Vue-Polyglot没有得到翻译在版本2+中是异步的这不是将AirBnb的Polyglot.js集成到Vue中的插件，而是一个用于在VueJs中管理翻译的插件。安装npm install --save vue-polyglot TLDR猜测浏览器语言，并直接在您的组件中自动使用默认消息{{$ t（'error_684'，'用户已经存在'）}}在翻译this时加载数据。$ t（'你好使用

vuejs插件_VueJS 2的基本翻译插件

cuk5340的博客

07-26

1769

vuejs插件 Vue-Polyglot (Vue-Polyglot) basic translation plugin for VueJS 2+. VueJS 2+的基本翻译插件。 View demo 查看演示 Download Source 下载源安装 (Installation) npm install --save vue-polyglot TLDR (TLDR) can lo...

vue 后台翻译_1kb 简单但强大的 Vue 翻译插件，支持服务端渲染

weixin_32401763的博客

12-28

921

A deadly simple i18n translate plugin for Vue, ready for Server Side Rendering.DemoUsageyarn add vue-translator复制代码Basic Usageimport Vue from 'vue'import VueTran...

【Vue✨】Vue3 中英文切换功能实现

2301_77798916的博客

08-10

670

在 Vue3 项目中，支持多语言界面的项目，如电商平台、社交媒体、在线教育平台等需要多语言支持的网站会有中英文切换功能。本次我们将使用vue-i18n插件来管理语言的切换。

【解决方案】在Vue、HTML项目中使用@spacechart/translate 插件实现在线实时翻译、自定义翻译

朝拜者

02-02

2230

在Vue、HTML项目中使用@spacechart/translate 插件实现在线实时翻译、自定义翻译

vue2中 element ui el-date-picker中英文切换

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

项目中需要用到中英文切换，这里用到vue-i18n插件，配合localStorage使用

第一步：下载包 vue-i18n

第二步：在main.js中引入 vue-i18n包

项目中需要用到中英文切换，这里用到`vue-i18n`插件，配合`localStorage`使用

第一步：下载包 `vue-i18n`

第二步：在`main.js`中引入 `vue-i18n`包