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

今天想来写一下以前为项目搭建的国际化（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.js、langs文件夹，在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',
  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组件【基本用法】，引用成功后，页面以下图，这里不对组件引用作过多阐述。

此时切换语言后，咱们发现暴露在外层咱们可修改的语言文字并不会有变化，可是你点击右上角的关闭符号后，会发现里面内置的语言已经改变了。

Js调用

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

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

github地址

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

若是有任何疑问或补充，欢迎在评论区给我留言讨论。

或者来个人博客看个人最新更新，我平时还会总结一些日语的小知识，喜欢日语的小伙伴也能够和我一块儿沟通讨论。

感谢观看
鞠躬 ～