返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue实现网页语言国际化切换
  • 299
分享到

vue实现网页语言国际化切换

2024-04-02 19:04:59 299人浏览 安东尼
摘要

一、基本步骤 1:安装 yarn add Vue-i18n  在此路径新建一个.js文件:src/lang/index.js后:   2:导入 import VueI18n from

一、基本步骤

1:安装 yarn add Vue-i18n

 在此路径新建一个.js文件:src/lang/index.js后:

 

2:导入

import VueI18n from 'vue-i18n'

3:注册

import Vue from 'vue'

Vue.use(VueI18n)

4:实例化


const  i18n=new VueI18n({
	locale:'当前语言的标识',   // en:英文  zh:中文
	messages:{
		//  语言包
		en:{
		home:'home'
		},
		zh:{
		home:'首页'
		}
	}
})

5:暴露出去

export default   i18n

6:挂载到main.js


import i18n from '@/lang'
new Vue({
i18n
})

使用:<div>{{$t('home')}}</home>

二、在main.js中导入element-ui国际化语言配置


import i18n from './lang/index'
import ElementUI from 'element-ui'
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

三、新建一个.vue文件通过按钮实现语言切换

 注意:

this.$i18n.locale能获取与设置当前语言在js文件中使用国际化

四、实现网站菜单的国际化处理,需要在路由中引入

import i18n from '@/lang'后将i18n.t===this.$t

到此这篇关于vue实现网页语言国际化切换的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: vue实现网页语言国际化切换

本文链接: https://www.lsjlt.com/news/158735.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue实现网页语言国际化切换
    一、基本步骤 1:安装 yarn add vue-i18n  在此路径新建一个.js文件:src/lang/index.js后:   2:导入 import VueI18n from...
    99+
    2024-04-02
  • Android国际化之中英文语言切换
    不想废话,直接上干货 @Override protected void attachBaseContext(Context newBase) { Loca...
    99+
    2024-04-02
  • 【android studio 简单配置多语言国际化app 一行代码实现切换语言】
    文章目录 前言一、语言文件二、一行代码切换语言1.切换语言2.保存语言状态3.界面闪动解决之返回主界面 总结 前言 新版本的android studio配置多语言其实很简单,不过目前网上找到的几个博客都搞得很复杂,可能是版...
    99+
    2023-08-16
    android studio android ide 自动翻译
  • struts2的国际化如何实现网站整体中英文切换
    这篇文章主要为大家展示了“struts2的国际化如何实现网站整体中英文切换”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“struts2的国际化如何实现网站整体中英文切换”这篇文章吧。具体如下:环...
    99+
    2023-05-30
    struts2
  • vue element plus多语言切换怎么实现
    这篇文章主要讲解了“vue element plus多语言切换怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue element plus多...
    99+
    2023-06-22
  • 打破语言壁垒:Vue 的国际化指南
    设置国际化 Vue 提供了 VueI18n 库,用于管理应用程序的国际化。要设置国际化,请遵循以下步骤: 安装 VueI18n:npm install vue-i18n 在 main.js 文件中导入 VueI18n 并创建实例: i...
    99+
    2024-04-02
  • 消除语言障碍:Vue 国际化的艺术
    引言 在构建全球化的应用程序时,语言障碍是一个常见的挑战。Vue.js 提供了全面的国际化支持,使开发人员能够无缝地将应用程序本地化到多种语言。 什么是国际化? 国际化是使应用程序能够适应不同区域和语言的过程。这包括翻译文本、适应文化差异...
    99+
    2024-04-02
  • 超越语言界限:Vue 中的国际化策略
    vue-i18n 库 vue-i18n 是 Vue.js 官方推荐的国际化库。它提供了一套全面的 API,用于定义翻译、切换语言以及格式化日期和数字。 使用 vue-i18n 安装库:npm install vue-i18n 创建实例:...
    99+
    2024-04-02
  • PHP 多语言:国际化网站的必备技能
    在全球化互联网时代,构建多语言网站已成为企业拓展国际市场的必要条件。PHP 作为一种流行的 Web 开发语言,为多语言网站提供了强大的支持。掌握 PHP 多语言技能至关重要,可以帮助开发人员创建满足全球受众需求的交互式网站。 PHP 多语...
    99+
    2024-04-02
  • 3分钟实现iOS语言本地化/国际化(图文教程)
    前言 语言本地化,又叫做语言国际化。是指根据用户操作系统的语言设置,自动将应用程序的语言设置为和用户操作系统语言一致的语言。往往一些应用程序需要提供给多个国家的人群使用,或者一个国家...
    99+
    2022-05-19
    iOS 本地化 国际化
  • vue如何实现点击切换页面
    本篇内容介绍了“vue如何实现点击切换页面”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!vue实现点击切换页面的方法:1、注册一个组件,并在...
    99+
    2023-07-04
  • Vue Element前端应用开发之界面语言国际化
    目录概述1、main入口函数支持2、界面处理实现概述 VUE+Element 前端应用实现国际化的处理还是非常方便的,一般在Main.js函数里面引入语言文件,然后在界面上进行一定的...
    99+
    2024-04-02
  • js如何使用i18n实现页面国际化
    小编给大家分享一下js如何使用i18n实现页面国际化,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!页面引用的插件<scri...
    99+
    2024-04-02
  • 如何在springboot中实现页面的国际化
    确保这个修改是正确的(否则将会出现乱码) 创建i18n文件夹(就是国际化的意思),然后在此文件加下创login.properties login_zh_CN,properties文...
    99+
    2024-04-02
  • vue中怎么实现点击切换页面
    本教程操作环境:windows7系统、vue3、Dell G3电脑。vue中怎么实现点击切换页面?Vue案例--点击按钮切换页面用vue的方式做一个切换页面的效果。思路:注册一个组件,并在父元素中使用。使用v-if 和 v-else 来控制...
    99+
    2022-11-22
    Vue
  • 征服多语言世界:使用 Vue 进行无缝国际化
    简介 国际化对于现代 Web 应用程序至关重要,它允许应用程序针对不同的语言和地区进行定制。Vue.js,一个流行的 JavaScript 框架,提供了内置支持,可实现无缝的国际化。 Vue.js 的国际化特性 Vue.js 的国际化特...
    99+
    2024-04-02
  • Android实现系统语言切换功能
    简单介绍下这个需求的缘由,这段时间因公司业务需要,其中有一项“设置系统语言”功能,就是在使用APP的过程中,动态的去切换整个Android机器的语言,具体参照手机设置页面有语言...
    99+
    2022-06-06
    系统 Android
  • vue与vue-i18n如何实现后台数据的多语言切换功能
    小编给大家分享一下vue与vue-i18n如何实现后台数据的多语言切换功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在XXX...
    99+
    2024-04-02
  • Android Studio快速实现Flutter应用的国际化和多语言支持
    文章目录 Flutter实现国际化和多语言支持添加依赖库Android Studio 安装flutter Intl插件项目初始化增加语言app中使用国际化在应用中切换语言:运行应用 总结...
    99+
    2023-10-27
    android studio flutter android 国际化 多国语言 Intl
  • Android如何实现中英文语言切换
    这篇文章主要介绍Android如何实现中英文语言切换,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!代码@Override    protected void ...
    99+
    2023-06-22
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作