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

zlting~

已于 2022-02-28 16:35:21 修改

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE VUE常用组件/插件文章标签：中英文切换 vue 语言

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

本文链接：https://blog.youkuaiyun.com/sunshineTing2/article/details/112839611

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中需要用到中英文切换，这里用到`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元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zlting~

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

xiaodebufuyan的博客

08-07

323

elementui国际化 vue-i18n

vue3.0安装使用vue-i18n实时切换语言不用刷新

qq_37482427的博客

03-25

5757

vue3.0安装使用vue-i18n实时切换语言

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

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

Vue 3 实现多语言切换

热门推荐

weixin_46607967的博客

11-15

1万+

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

使用 vue-i18n 切换中英文

仗剑天涯，从摘要开始

10-12

991

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插件】实现vue项目中英文切换

花椒和蕊的博客

12-06

1534

v18n插件笔记

Vue-i18n 国际化学习笔记

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

09-28

2373

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

Vue 国际化之 vue-i18n 的使用

weixin_64051447的博客

06-25

1531

其次，在组件中不能直接 $t('main.message') 使用，该种方式确定了翻译对象，而“msg”的翻译对象不确定，有可能是“message”、“display”甚至更多，于是，我使用了模板字符串，实现了值动态变化自动翻译的效果。首先，明确“msg”的取值有两个，分别为“message”、“display”，此时确保语言包中都存在这两个词与对应的翻译值。如下，“msg”存在多个取值，我们希望在切换“msg”值同时根据当前语言环境进行翻译。在 lang 下创建 index.js，使用如上的两种语言包。

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

cuk5340的博客

07-26

1743

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...

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（'你好使用

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

weixin_32401763的博客

12-28

899

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、HTML项目中使用@spacechart/translate 插件实现在线实时翻译、自定义翻译

朝拜者

02-02

2021

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

手把手教程 vue-i18n element实现国际化语言切换

qq_43555948的博客

11-04

1769

vue-i18n 国际化语言切换在项目开发时，会有各国国家语言切换的需求，这里我使用了i18n来实现项目国际化。 i18n安装在项目更目录下运行（我个人使用的是cnpm）: npm install vue-i18n 创建语言包根据自己实际情况在src下创建语言包目录整理语言包json如下（此处举例中文包）：整理完中文包，就把整个json发给翻译小姐姐，这样我们就有了英文语言包。 main.js中引入 //引入国际化语言包 import VueI18n from 'vue-i18n' Vue.

Element plus中的 i18n怎么实现中英文随时切换

06-08

Element Plus 的 i18n 实现中英文随时切换的步骤如下： 1. 在项目中安装 `vue-i18n` 包 ```bash npm install vue-i18n --save ``` 2. 在入口文件 `main.js` 中引入 `vue-i18n` 并且配置 ```javascript import Vue from 'vue' import VueI18n from 'vue-i18n' import ElementUI from 'element-ui' import locale from 'element-ui/lib/locale' import App from './App.vue' Vue.use(VueI18n) Vue.use(ElementUI) const messages = { 'zh-CN': require('./assets/lang/zh'), // 中文语言包 'en-US': require('./assets/lang/en') // 英文语言包 } const i18n = new VueI18n({ locale: 'zh-CN', // set locale messages // set locale messages }) locale.i18n((key, value) => i18n.t(key, value)) // 兼容element-ui的国际化 new Vue({ el: '#app', i18n, render: h => h(App) }) ``` 3. 在项目中创建语言包在 `src/assets/lang` 目录下创建 `zh.js` 和 `en.js` 文件，分别用于存放中文和英文语言包。例如： ```javascript // zh.js 中文语言包 module.exports = { message: { hello: '你好', about: '关于我们', contact: '联系我们' } } ``` ```javascript // en.js 英文语言包 module.exports = { message: { hello: 'Hello', about: 'About Us', contact: 'Contact Us' } } ``` 4. 在组件中使用 `$t` 方法进行语言切换 ```vue <template> <div> <p>{{ $t('message.hello') }}</p> <p>{{ $t('message.about') }}</p> <p>{{ $t('message.contact') }}</p> <el-button @click="changeLocale('zh-CN')">中文</el-button> <el-button @click="changeLocale('en-US')">English</el-button> </div> </template> <script> export default { methods: { changeLocale(locale) { this.$i18n.locale = locale } } } </script> ``` 在组件中使用 `$t` 方法可以获取当前语言下对应的翻译文本。使用 `this.$i18n.locale` 可以修改当前语言环境，从而实现中英文随时切换。

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

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

第一步：下载包 vue-i18n

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

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

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

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