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

一、基本步骤

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实现网页语言国际化切换的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue项目中vue-i18n和element-ui国际化开发实现过程

    vue项目中vue-i18n和element-ui国际化开发实现过程

    在vue构建的项目中,我们常用element-ui插件,在我的博客前面有讲述,具体怎么用vue-i18n插件进行国际化开发,但是在前面博客中,如果项目中使用了element-ui插件,插件中的语言文字替换可以结合element-ui插件一同进行.element-ui插件自身也提供了语言包.具体的配置和使用方法参考如下: 默认你已构建好了一个vue项目,在vue项目中安装vue-i18n以及element-ui插件 cnpm i vue-i18n --save-dev cnpm i element

  • 利用Vite2和Vue3实现网站国际化的全过程

    目录 前言 安装vue-i18n 配置Locales 实现 getLangs.js 创建 i18n 实例 模板中使用 语言切换 关于切换后需要刷新后才生效 切换语言触发其他组件更新 总结 前言 最近有人在吐槽项目使用 Vue3 之后,出现一堆问题,填坑困难,甚至是开发中才发现某些第三方库没有推出 Vue3 的版本,因此大发吐槽,强烈建议不使用 Vue3. 做好技术预研和兼容性调查是开发前的工作之一,特别是对于新技术或者大版本的更新,除非你有十个胆,否则不要在预研不充分的情况下,在正式项目中使用.

  • vue使用vue-i18n实现国际化的实现代码

    需求 公司项目需要国际化,点击按钮切换中文/英文 1.安装 npm install vue-i18n --save 2.注入 vue 实例中,项目中实现调用 api 和 模板语法 import VueI18n from 'vue-i18n' Vue.use(VueI18n) ; const i18n = new VueI18n({ locale: 'zh-CN', // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale messages: { 'zh-CN'

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

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

    一.前言 在4k广告机中需要实现多语言切换,这时候接触到国际化,前端框架无数,其中几种热门的框架都有相匹配的国际化插件工具.比如: vue + vue-i18n angular + angular-translate react + react-intl jquery + jquery.i18n.property 在4K广告机项目中使用的前端框架为Vue,故而我们将使用vue-i18n这个插件进行国际化功能的实现. 二.最终实现效果 三.国际化的实现 1.首先在自己的项目中安装 vue-i18n

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

    安装 npm install vue-i18n 新建一个文件夹 i18n ,内新建 en.js zh.js index.js 三个文件 准备翻译信息 en.js export default { home: { helloworld: "hello workd !" } }; zh.js export default { home: { helloworld: "你好世界" } }; index.js 创建Vue-i18n实例 import Vue from &qu

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

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

    一.基本步骤 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' }, z

  • Yii2语言国际化自动配置详解

    如何实现语言国际自动化,大家可能觉得自动化,是不是不需要配置就自动切换,这个思路我之前也想过,能不能根据IP来判断地理位置然后确定其语言,网上找过一个"IpToCountry"相关的,有兴趣的可以搜索出来看看,他会提供一个ip对照的表,每隔一段时间会更新一次,不过这个暂时没做,后面考虑尝试下 这里我们说下Yii2如何实现,因为我们上面的一篇文章分享做了语言国际化的配置,也将对应的语言翻译了出来,下面就是需要根据条件来做切换 从配置文件我们知道只需要更改language这个配置值就可以了

  • vue动态组件实现选项卡切换效果

    本文实例为大家分享了vue动态组件实现选项卡切换的具体代码,供大家参考,具体内容如下 导航按钮: <div class="tab-title"> <p @click="a='tab1'"><router-link to='/collectnewcars'>新车</router-link><em></em></p> <p @click="a='tab2'"&g

  • vue做网页开场视频的实例代码

    vue做网页开场视频的实例代码

    本demo背景是一个视频,文字是打印机效果,按钮在文字打完才会显示,点击按钮背景向上收起,同时显示默认首页组件(如是初建vue项目列表,则为helloWorld.vue的组件内容) 公司电脑没有gif动图尽情谅解 文末会附上demo地址,如需看效果,可前往下载 本人一直很喜欢网页开场有一段视频或动画,个人认为网页的开场动画起到引导浏览作用,相当于网页的一个开始,一个好的开始往往就成功了一半,对于浏览网站的用户来说,也就吸引了极大地注意力. 以上都是废话,网页开场动画在移动端的应用十分广泛,具体操

  • vue中将网页打印成pdf实例代码

    整理文档,搜刮出一个vue中将网页打印成pdf的代码,稍微整理精简一下做下分享. <template> <div class="pdf-wrap" id="pdfWrap"> <button v-on:click="getPdf">点击下载PDF</button> <div class="pdf-dom" id="pdfDom"></div&

  • js实现绿白相间竖向网页百叶窗动画切换效果

    本文实例讲述了js实现绿白相间竖向网页百叶窗动画切换效果.分享给大家供大家参考.具体分析如下: 前面我们讲解了一个网页百叶窗切换动画效果,不过是横向百叶窗,这个是竖向百叶窗,代码基本一样: 复制代码 代码如下: <html> <head> <title>百叶窗页面切换效果</title> <style> <!-- .intro{ position:absolute; left:0; top:0; layer-background-color

  • vue实现样式之间的切换及vue动态样式的实现方法

    vue实现样式之间的切换及vue动态样式的实现方法

    前言 既然我们选择了vue,那么在做东西时就不要想着去操作dom,所有的都交给vue来解决. 下面来说一个很简单但是很常用的效果,可能人人都会用到这样的需求 请看下图 导航栏的样式切换功能,如果我们使用jquery之类的东西来写,可能要写好多代码,那么我们用vue呢, 代码如下 html 附上vue中style与class绑定API <div id="wrap" class="box"> <div v-for="(list,index)

  • vue实现密码显示隐藏切换功能

    先给大家分享效果图: 具体实现代码如下所示: html: <group> <span>设置密码</span> <x-input :type="this.registration_data.pwdType" placeholder="请填写密码" @on-change="password"></x-input> <img :src="this.registration_da

  • Vue实现点击后文字变色切换方法

    这里用文字举例,图片切换的原理也是一样的 大概思路是:用两个class相同的span分别是切换前后的文字,class相同主要是为了变换前后的文字位置相同.然后用click事件控制它们的显隐. 代码如下: HTML: <span class="response" v-show="!showCommentInput" @click="showCommentInput = !showCommentInput">回复</span>

随机推荐