效果图:

当然,如果使用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. iOS 一张图片引发的崩溃SEGV_ACCERR

    出错日志一直报SEGV_ACCERR,原因原来是第三方库SDWebImage下载图片,远程图片的json文件不对导致的闪退 解决方法: 1.command + B 编译工程(最好在编译工程时,清除下缓 ...

  2. 自适应大邻域搜索代码系列之(1) - 使用ALNS代码框架求解TSP问题

    前言 上次出了邻域搜索的各种概念科普,尤其是LNS和ALNS的具体过程更是描述得一清二楚.不知道你萌都懂了吗?小编相信大家早就get到啦.不过有个别不愿意透露姓名的热心网友表示上次没有代码,遂不过瘾啊 ...

  3. leetcode-36-有效的数独

    题目描述: 判断一个 9x9 的数独是否有效.只需要根据以下规则,验证已经填入的数字是否有效即可. 数字 1-9 在每一行只能出现一次. 数字 1-9 在每一列只能出现一次. 数字 1-9 在每一个以 ...

  4. Java操作数据库实现"增删改查"

    本文主要讲解JDBC操作数据库    主要实现对MySql数据库的"增删改查" 综合概述: JDBC的常用类和接口 一   DriverManager类 DriverManage类 ...

  5. springcloud(九)-Feign使用Hystrix

    前言 上一篇我们使用注解@HystrixCommond的fallbackMethod属性实现回退.然而,Feign是以接口形式工作的,它没有方法体,上一篇讲解的方式显然不适用于Feign. 那么Fei ...

  6. express后端和fetch前端的json数据传递

    在使用express做后端,前端使用fetch API来请求后端时,一般都是用 JSON 数据进行通信的. 下面是一个简单的例子: 前端: if (up) { var passwordAgain = ...

  7. 测试Servlet生命周期例子程序

    写一个类TestLifeCycleServlet,生成构造器TestLifeCycleServlet();重写HttpServlet的doGet();重写GenericServlet的destroy( ...

  8. docker最新版本如何自定义配置文件

    1 如果你想使用 /etc/default/docker文件配置你的docker 在 /etc/systemd/system/docker.service.d/docker.conf 添加下面---- ...

  9. js--常量,变量

    常量 内存中的一个的固定的地址,其中的数值也是固定的 变量 内存的一个地址,其中的内容有我们更改维护 值类型与引用类型 改变值类型的变量时,影响值的变量 全大写的名称一般为常量 var a = 1 v ...

  10. 2-4 js基础-事件对象小结

    var e=ev||event; e.cancelBubble=true; document.documentElement   html document.body                  ...