vue+vue-i18n搭建国际化网站【兼容Element-UI、动态切换css】

2019-05-21 admin

最近因为雾霾很厉害,所以发烧了在家养病,想着难得有空,正好趁机整理一下以前在项目中遇到过的问题及需求。今天想来写一下之前为项目搭建的国际化(i18n)功能,由于之前项目主要是使用的Vue+Element-UI,所以本文章中分别有vue-i18n和兼容element-ui的vue-i18n两种写法,大家可以按需参考。

前言

本文是基于vue进行实现的国际化功能,我假设你对vue已经有了一定的了解,并且已经拥有了属于你自己的vue项目环境,这里不做过多阐述。

如果你只是急需一个已经搭建好的i18n模版,也可以直接去我的github仓库下载我已经写好的项目模版。

vue-i18n

安装vue-i18n

npm install vue-i18n

配置文件

如下图创建i18n文件夹,在i18n文件夹里分别创建i18n.jslangs文件夹,在langs文件夹下面创建你的语言文件(cn.js/en.js/ja.js)和index.js文件。 语言包分别为中文/英文/日语,大家在项目中选择创建自己需要的语言包即可。 目录示例

i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './langs'

Vue.use(VueI18n)
//从localStorage中拿到用户的语言选择,如果没有,那默认中文。
const i18n = new VueI18n({
  locale: localStorage.lang || 'cn',
  messages,
})
export default i18n

index.js

import en from './en'
import cn from './cn'
import ja from './ja'
export default {
  en,
  cn,
  ja,
}

cn.js

const cn = {
    message: {
        'hello': '你好',
    }
}

export default cn 

en.js

const en = {
    message: {
        'hello': 'hello',
    }
}

export default en

ja.js

const ja = {
    message: {
        'hello': 'こんにちは',
    }
}

export default ja

🌟 在配置语言包的时候,key值一定要保持统一,因为i18n是通过你的key值来切换语言的,如果key值有误,就不能正确的切换语言包,这一点千万要注意。

main.js

import i18n from './i18n/i18n'

new Vue({
  el: '#app',
  router,
  i18n, //加上i18n
  components: { App },
  template: '<App/>'
})

到此我们的i18n已经全部配置结束了,下面我们去页面中进行使用。

配置页面

HTML部分

   <p>{{$t(‘message.hello’)}}</p>//此时应该是中文
   <button @click="switchLang('en')">英语</button>
   <button @click="switchLang('cn')">中文</button>
   <button @click="switchLang('ja')">日语</button>

Js部分

methods:{
    switchLang(lang)  {
        this.$i18n.locale = lang 
        //把语言保存在localStorage中
        localStorage.setItem('lang',lang);
    }
  },

到此,运行npm run dev就可以看到可以进行语言切换的项目了。

根据语言切换css

到此,我们已经实现了基本的国际化功能。但是,我们在切换语言的时候不得不面临的一个问题就是因为语言的不同,即使是同一句话,文字样式的长度也会不同。所以这时候特别容易产生一些页面样式上的结构错位,为此我们就需要根据不同语言来切换项目的css。我这边提供的思路是在最上层html的div上添加一个可以动态切换class的变量,以改变项目的父级的class名称,实现切换语言的同时切换css样式。

HTML部分

<template>
  <div :class="langCss">
  </div>
</template>

Js部分

在data中定义保存class的变量

 data () {
    return {
      langCss:window.localStorage.getItem('lang')||'cn',
      //先去取localStorage里保存的语言,如果没有,那么就默认中文
      //这么做的意义是为了用户在刷新页面的时候样式不丢失。
    }

紧接着在我们的switchlLang函数后添加新的一行,以便在切换语言的同时切换class。

   switchLang(lang)  {
        this.$i18n.locale = lang 
        localStorage.setItem('lang',lang);
        this.langCss=lang;//新添加的,以便切换父级class
    }

Css部分

在style标签中中设置你想要的样式,我这边以改变文字颜色为例。

.en button {
  color: steelblue;
}
.cn button {
  color: #666;
}
.ja button {
  color: seagreen;
}

到此vue-i18n的内容就全部结束了,由于现在很多人在使用vue的同时会搭配Element-UI使用,所以我们在现在的基础上优化一下我们的项目,以便可以兼容Element-UI。

兼容Element-UI的i18n

参考网址

Element组件文档 Element官网-i18n

安装Element相关依赖

npm i element-ui -s

修改配置

main.js

//引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
  store:store,
  i18n,
  ElementUI,//添加element-ui
  el: '#app',
  components: { App },
  template: '<App/>',
})

i18n.js

import Vue from 'vue';
import locale from 'element-ui/lib/locale';
import VueI18n from 'vue-i18n';

import messages from './langs';
Vue.use(VueI18n);
//从localStorage中拿到用户的语言选择,如果没有,那默认中文。
const i18n = new VueI18n({
    locale: localStorage.lang || 'cn',
    messages,
})
locale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换

export default i18n

修改语言包

// en.js
import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
    message: {
        'hello': 'hello',
    },
    ...enLocale
}

export default en;

// **********分割线**********

// cn.js
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const cn = {
    message: {
        hello: '你好,世界',
    },
    ...zhLocale
}

export default cn;

// **********分割线**********

// ja.js
import jaLocale from 'element-ui/lib/locale/lang/ja'
const ja = {
    message: {
        hello: 'こんにちは、世界',
    },
    ...jaLocale
}

export default ja;

如果console里有如⬇️警告,证明的你语言包没有配置正确,返回上一步【修改语言包】查看。 警告

配置页面

引用组件

至此,我们就可以引入一个Element-UI的组件进行开发了,这里以dialog组件为例演示一下基于Element-UI的文字国际化方案。当然,你也可以去Element组件文档去引用一些别的组件,这全看你自己的项目需要。

我引用的是第一个dialog组件【基本用法】,引用成功后,页面如下图,这里不对组件引用做过多阐述。 dialog 此时切换语言后,我们发现暴露在外层我们可修改的语言文字并不会有变化,但是你点击右上角的关闭符号后,会发现里面内置的语言已经改变了。 dialog

Js调用

下面需要我们来手动配置一下未切换文字的语言包,配置方法同上文的【配置页面】,这里我顺便说一下,在js里调用国际化直接用this.$t(‘message.xxx’)即可,如下。

handleClose(done) {
        this.$confirm(this.$t('message.confirm'))//js内部切换
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }

github地址

到此,国际化内容全部结束,我把所有代码都放到了我的github仓库上,里面提供了vue-i18n以及兼容Element-UI的两种国际化版本。假如上文中还有哪里不明白的,可以直接下载下来参考。

如果有任何疑问或补充,欢迎在评论区给我留言讨论。

或者来我的博客看我的最新更新,我平时还会总结一些日语的小知识,喜欢日语的小伙伴也可以和我一起沟通讨论。

感谢观看 鞠躬 ~ 比心

[转载]原文链接:https://segmentfault.com/a/1190000019242162

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65433.html

文章标题:vue+vue-i18n搭建国际化网站【兼容Element-UI、动态切换css】

相关文章
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
bootstrap PrintThis打印插件使用详解
bootstrap PrintThis打印效果图: 如图,这个是调用了谷歌的打印,使用很方便,可以自己調样式,需要的可以研究一下,这边贴出使用方法。 附上GitHub:https://github.com/jasonday/printTh...
2017-03-16
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
html5+JavaScript教程-微信打飞机小游戏源码
js &#x2F;&#x2F; JavaScript Document var c = document.getElementById(&quot;dotu&quot;); var cxt = c.getContext(&quot;2d&q...
2015-11-12
为什么要选择Nodejs?Nodejs有什么好处?
什么?JavaScript还能用作服务器编程! Caleb Madrigal是来自美国密尔沃基市的一名软件顾问。四年前,他在听说“将JavaScript用作服务器端语言”这样的说法时,认为那是一个荒唐的想法。有那么多服务器端语言可供选择,为...
2015-11-12
JavaScript编辑器推荐
主流编辑器有SublimeText,Notepad++,webstorm等,是使用最广泛的编辑器,但也有一些JavaScript编辑器提供有着各自的特性和功能,适应不同人的需求,以下是几款优秀的编辑器,相信你一定能找到自己喜欢的。 1. W...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
回到顶部