效果图:

当然,如果使用iview组件,组件也会对应切换语言。

这里,假设已经用vue-cli脚手架创建了项目,熟悉vue-router,而且已经引入了iview UI。

第一步:

我们在main.js引入vue-i18n

import VueI18n from "vue-i18n";

在main.js目录下新建一个language文件夹,里面分别新建3个文件en-US.js、zh-CN.js、zh-TW.js文件,来存放不同语言的文字。分别加入如下代码:

en-US.js

module.exports = {
venueTemperature: "Venue Temperature",
venueHumidity: "Venue Humidity",
outdoorTemperature: "Outdoor Temperature",
outdoorHumidity: "Outdoor Humidity"
};

zh-CN.js

module.exports = {
venueTemperature: "场馆温度",
venueHumidity: "场馆湿度",
outdoorTemperature: "室外温度",
outdoorHumidity: "室外湿度"
};

zh-TW.js

module.exports = {
venueTemperature: "場館溫度",
venueHumidity: "場館濕度",
outdoorTemperature: "室外溫度",
outdoorHumidity: "室外濕度"
};

第二步:

根据iview官网的国际化示例,我们引入iview的语言包(前3个文件)。

在main.js文件里面继续引入自己写的语言包(后3个)

import zhLocale from "iview/src/locale/lang/zh-CN";
import enLocale from "iview/src/locale/lang/en-US";
import twLocale from "iview/src/locale/lang/zh-TW"; import cn from "./language/zh-CN";
import tw from "./language/zh-TW";
import us from "./language/en-US";

第三步:

继续在main.js文件里面使用vue-i18n

Vue.use(VueI18n);
Vue.locale = () => {};

第四步:

把自己写的语言包和iview的语言包合并,这里使用Object.assign()。因为在改变我们自己写的语言包的时候,也同时要改变iview组件的语言。

message就是合并后的语言包对象,然后传进VueI18n中,最后在Vue中引用。

这里还用本地存储记录当前选中的语言是哪一种。

其中,'zh', 'en', 'tc',是我们自己定义的key值,locale接收到哪个就显示对应哪种语言。

const messages = {
zh: Object.assign(cn, zhLocale),
en: Object.assign(us, enLocale),
tc: Object.assign(tw, twLocale)
}; // 设置参数,创建 Vuei18n 的实例。
const i18n = new VueI18n({
locale: localStorage.getItem("language") || "zh", // set locale
messages // set locale messages
}); new Vue({
el: "#app",
router,
i18n,
components: { App },
template: "<App/>"
});

第五步:

在你的组件里面写一个select来切换语言

用{{$t(' ')}}来引入对应的值,像这里我们定好了“场馆温度”的key值为venueTemperature,所有就写:{{$t("venueTemperature")}}

<Menu mode="horizontal">
<MenuItem name="1">
<Icon type="ios-paper" />
{{$t("venueTemperature")}}
</MenuItem>
<MenuItem name="2">
<Icon type="ios-people" />
{{$t("venueHumidity")}}
</MenuItem>
<MenuItem name="3">
<Icon type="ios-stats" />
{{$t("outdoorTemperature")}}
</MenuItem>
<MenuItem name="4">
<Icon type="ios-construct" />
{{$t("outdoorHumidity")}}
</MenuItem>
<Select v-model="locale" @on-change="changeLangFn" style="width:100px" placeholder="切换语言">
<Option v-for="(item,index) in changeLang" :value="item.value" :key="index">{{item.label}}</Option>
</Select>
</Menu>

第六步:

给select组件赋值,让它能都记录选中的是哪一种语言

写一个changeLangFn来更换语言,给 this.$i18n.locale 传对应的key值(我们在main.js文件定义的),就会显示对应的语言。

同时用本地存储把key值存给language。

export default {
data() {
return {
locale: [],
changeLang: [
{
value: "zh",
label: "简体中文"
},
{
value: "en",
label: "English"
},
{
value: "tc",
label: "繁體中文"
}
]
};
},
mounted() {
// this.$i18n.locale 要传key
this.locale = this.$i18n.locale;
this.changeLangFn(this.locale);
},
methods: {
// 切换多语言
changeLangFn(val) {
let chan = this.changeLang;
for (let i in chan) {
if (chan[i].value === val) {
this.locale = this.$i18n.locale = chan[i].value;
localStorage.setItem("language", chan[i].value);
}
}
}
}
};

在此,就已经OK,如果有引入iview组件,也是有语言切换的。

最后:

main.js文件内容为:

import Vue from "vue";
import App from "./App";
import router from "./router"; import iView from "iview";
import "iview/dist/styles/iview.css"; import VueI18n from "vue-i18n";
import zhLocale from "iview/src/locale/lang/zh-CN";
import enLocale from "iview/src/locale/lang/en-US";
import twLocale from "iview/src/locale/lang/zh-TW"; import cn from "./language/zh-CN";
import tw from "./language/zh-TW";
import us from "./language/en-US"; Vue.use(iView);
Vue.use(VueI18n); Vue.locale = () => {}; Vue.config.productionTip = false; const messages = {
zh: Object.assign(cn, zhLocale),
en: Object.assign(us, enLocale),
tc: Object.assign(tw, twLocale)
}; // 设置参数,创建 Vuei18n 的实例。
const i18n = new VueI18n({
locale: localStorage.getItem("language") || "zh", // set locale
messages // set locale messages
}); new Vue({
el: "#app",
router,
i18n,
components: { App },
template: "<App/>"
});

自己写的组件Header.vue

<template>
<div class="header_nav">
<Menu mode="horizontal">
<MenuItem name="1">
<Icon type="ios-paper" />
{{$t("venueTemperature")}}
</MenuItem>
<MenuItem name="2">
<Icon type="ios-people" />
{{$t("venueHumidity")}}
</MenuItem>
<MenuItem name="3">
<Icon type="ios-stats" />
{{$t("outdoorTemperature")}}
</MenuItem>
<MenuItem name="4">
<Icon type="ios-construct" />
{{$t("outdoorHumidity")}}
</MenuItem>
<Select v-model="locale" @on-change="changeLangFn" style="width:100px" placeholder="切换语言">
<Option v-for="(item,index) in changeLang" :value="item.value" :key="index">{{item.label}}</Option>
</Select>
</Menu>
</div>
</template>
<script>
export default {
data() {
return {
locale: [],
changeLang: [
{
value: "zh",
label: "简体中文"
},
{
value: "en",
label: "English"
},
{
value: "tc",
label: "繁體中文"
}
]
};
},
mounted() {
// this.$i18n.locale 要传key
this.locale = this.$i18n.locale;
this.changeLangFn(this.locale);
},
methods: {
// 切换多语言
changeLangFn(val) {
let chan = this.changeLang;
for (let i in chan) {
if (chan[i].value === val) {
this.locale = this.$i18n.locale = chan[i].value;
localStorage.setItem("language", chan[i].value);
}
}
}
}
};
</script>

vue项目使用vue-i18n和iView切换多语言的更多相关文章

  1. 构建vue项目(vue 2.x)时的一些配置问题(持续更新)

    基于前文,使用vue-cli脚手架工具构建项目,并使用了webpack,那么我在项目中遇到的一些与配置相关的问题将在这里进行汇总. 1.代码检查问题 由于我们在构建项目时,使用了Eslint对我们的项 ...

  2. Vue.js-创建Vue项目(Vue项目初始化)并不是用Webstrom创建,只是用Webstrom打开

    我犯的错误:作为vue小白,并不知道还要单独去创建初始的vue项目,于是自己在webstrom中建了一个Empty Project, 在其中新增了一个js文件,就开始import Vue from “ ...

  3. 从零构建vue项目(三)--vue常用插件

    一.直接拉取的模板中,package.json如下: { "name": "vuecli2-test", "version": " ...

  4. vue 项目实战 (vue全家桶之--- vuex)

    老规矩先安装 npm install vuex --save 在看下面内容之前 你应该大概的看了一边vuex官方的文档对vuex有个大概对了解 首先 vuex 是什么? vuex 是属于vue中的什么 ...

  5. 运行vue项目--安装vue脚手架vue cli

    第一步. 安装node: 官网下载node的.pkg,下载地址,选择相应版本进行下载 mac终端下输入npm -v 和 node -v, 出现相应版本号即安装成功. 若均提示 command not ...

  6. 创建vue项目 webpack+vue

    # 全局安装 vue-cli $ npm install -g vue-cli # 创建一个基于 "webpack" 模板的新项目 根据提示填写项目信息 && 对项 ...

  7. 使用Vue脚手架(vue-cli)从零搭建一个vue项目(包含vue项目结构展示)

    注:在搭建项目之前,请先安装一些全局的工具(如:node,vue-cli等) node安装:去node官网(https://nodejs.org/en/)下载并安装node即可,安装node以后就可以 ...

  8. vue-cli3创建vue项目之vue.config.js配置

    module.exports = { // 基本路径 publicPath: '/', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 ...

  9. 05 vue项目01-组件关系、bootstrap

    1.django后端项目 1.项目预期 配置前端静态资源            页面展示 2.django项目代码 主url from django.contrib import admin from ...

随机推荐

  1. linux 多线程之间信号传递

    函数 sigwait sigwait的含义就如同它的字面意思:等待某个信号的到来.如果调用该函数的线程没有等到它想等待的信号那么该线程就休眠.要达到等到一个信号,我们得做下面的事: 首先,定义一个信号 ...

  2. pygame学习_part1_pygame写程序前的准备工作

    import pygame from pygame import * pygame.init() #准备pygame,不准备无法使用功能 pygame.display.set_mode((x,y坐标) ...

  3. Java线程池的选择

    在java的concurrent.Executors主要提供两种线程池:无固定线程数但有限制任务队列的cachedThreadPool与有固定线程数但无任务队列限制的fixedThreadPool,这 ...

  4. tp5.0 根据经纬度 获取附近信息

    自己备注一下 /* *参数说明: *$lng 经度 *$lat 纬度 *$distance 周边半径 默认是500米(0.5Km) */ public function returnSquarePoi ...

  5. js 实现星级评分

    最近的项目中有一个星级评分的需求,  自己就写了一下, 由于可能一个页面要用到多个,就采用了面向对象的写法. 用到的png图片也放到这里.    js要用到jquery. css: .sr-star{ ...

  6. MAVEN打zip包

    https://blog.csdn.net/yulin_hu/article/details/81835945 https://www.cnblogs.com/f-zhao/p/6929814.htm ...

  7. activity启动模式launchMode区别和优化

    初学android的开发人员,可能会经常忽略这个重要的设置. Activity一共有以下四种launchMode:1.standard2.singleTop3.singleTask4.singleIn ...

  8. (转)mysql 备份与恢复mysqlhotcopy

    原文:http://fuwenchao.blog.51cto.com/6008712/1331910 mysqlhotcopy是一个Perl脚本,最初由Tim Bunce编写并提供.它使用LOCK T ...

  9. rabbitmq无用使用guest用户远程连接

    最近开始使用rabbitmq,因为不了解,浪费了不少时间,记录如下: 使用场景:服务器(linux)上部署了一个app1模块,该模块向rabbitmq发送消息,我想让这个模块的消息发送到我本地(win ...

  10. js跳出循环:break 、continue 、return

    js跳出循环:break .continue .return 本文虽然讲的是js里跳出循环的方法,但是jquery其实就是在js的基础上封装而来的,所以一些js里的语法应用,在jquery里也是通用的 ...