教你如何在vue中使用国际化

本文展示了在vue中如何使用国际化来更改咱们的项目语言，首先我们需要安装i18n这个插件

1、i18n

1.1、i18n的安装

i18n是internationalization这个单词的缩写，取了首字母i和结尾字母n，中间一用有18个字母，所以组合起来就所写成i18n，这是一个用于给vue国际化的插件， 它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中

安装 | Vue I18nkazupon.github.io

//使用yarn
yarn add vue-i18n 
//npm
npm i vue-i18n -S

1.2、i18n基本使用

如果在一个模块系统中使用它，必须通过 Vue.use() 明确地安装 vue-i18n：

假如当前的目录是src/i18n/index.js

//src/i18n/index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)
// 准备翻译的语言环境信息
const messages = {
  en: { 
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

// 通过选项创建 VueI18n 实例
const i18n = new VueI18n({
  locale: 'ja', // 设置地区
  messages // 设置地区信息
})

上面代码中的messages对象中有两个属性，属性名分别是en和ja其实在i18n中这两个字段是和下面new VueI18n实例中的locale里的值相对应的，而messages对象又作为了new VueI18n的实例属性，所以当locale的值是ja的时候，那么会加载messages.ja这个对象中的内容

接下来，我们需要将这个i18n实例挂载在Vue的option中

import Vue from 'vue'
import i18n from "./src/i18n/index.js"
new Vue({
	i18n
})

那么如何在视图中呈现呢，其实也很简单，我们只需要在插值中使用$t这个函数就可以了

<div id="app">
  <p>{{ $t("message.hello") }}</p>
</div>

最终展示的效果是

<div id="app">
 <p>hello world</p>
</div>

是不是很简单，当然这是咱们对i18n最基础的使用，如果想要更深入的使用，可以查看

开始 | Vue I18nkazupon.github.io

2、在vue-cli项目中使用

2.1、创建i18n文件结构

我们首先在项目中src目录下建立一个叫做i18n的文件夹，路径为/src/i18n 当前的例子只提供两种语言(多了写的累-_-||)，分别是en英文和zh中文，格式如下建立就可以了，我们秉承着高内聚低耦合的思路，所以把原本i18n实例中messages中的属性进行模块化拆分为两个文件，如下图，都放置在config文件夹中

2.2、config中两个文件的内容定义

en.js和zh.js我们可以先定义一些内容

en.js

export default {
    table: {//假如用于翻译表格
        date: "Date",
        name: "Name",
        address: "Address"
    },
    menu: {},//假如项目中日后还有菜单
    tabs: {}//tab切换等
}

zh.js

export default {
    table: {
        date: "日期",
        name: "姓名",
        address: "地址"
    },
    menu: {},
    tabs: {}
}

2.3、配置i18n文件夹下的index.js文件

目前我们已经对两个js文件进行了配置，接下来，我们来配置下/src/i18n/index.js文件，我们在开发过程中都知道，如果一个路由或者api有很多内容都写在一个文件，容易造成维护灾难，继续秉承高内聚低耦合的思路，我们和对项目中的路由或者api进行model划分，本文中的两个语言配置en和zh也是划分模块，但是如果我们有20几个国家的语言需要翻译，我们在index中一个一个的import显然对开发效率来书是中灾难，我们的代码可能这样

import en from './config/en'
import id from './config/id'
import ja from './config/ja'
import ae from './config/ae'
import am from './config/am'
import ca from './config/ca'
import al from './config/al'
.....

为了解决这个问题，本文采用了webpack中的require.context方法来解决这个问题

2.4、使用require.context()

require.context是webpack提供的方法，用这个方法我们可以批量引入我们想要的文件，require.context可以返回一个具有 resolve， keys， id 三个属性的方法

1. resolve() 它返回请求被解析后得到的模块 id
2. keys() 它返回一个数组，由所有符合上下文模块处理的请求组成
3. id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到

这个方法接受3个参数

1. dir传入一个目录进行搜索
2. child是否要搜索子目录
3. regExp传入正则表达式来匹配哪些文件需要引入

let langFiles = require.context("./config", false, /\.js$/);

当我们调用kes()方法的时候可以得到如下属性

let langFiles = require.context("./config", false, /\.js$/);
console.log(langFiles.keys())//["./cn.js","./zh.js"]

以上便是require.context的简单使用，如果想要知道更详细的用法，那我后续会再开一期关于require.context的专题，敬请期待

2.5、继续配置/src/i18n/index.js

下面的代码中我使用了一个正则表达式

let reg = /^\.\/([^\.]+)\.([^\.]+)$/ //正则用于匹配文件名

用这个正则的目的是为了，我们需要将数据处理成这样

{
    zh:{...}，
    en:{...}
}

处理成这种i18n中message属性对应的数据模式，我们通过forEach获取下来的key是这种类型的./zh.js使用正则的目的就是截取其中的zh两个字符，然后生成复合message属性的数据模型

import Vue from "vue"
import VueI18n from "vue-i18n"
Vue.use(VueI18n)//注入到所有的子组件

//require.context(path，deep，regExp)
//有3个方法 分别是keys() 


let langFileds = require.context('./config'， false， /\.js$/)

let regExp = /\.\/([^\.\/]+)\.([^\.]+)$/ //正则用于匹配 ./en.js中的'en'

// regExp.exec('./en.js')

let messages = {} //声明一个数据模型，对应i18n中的message属性

langFileds.keys().forEach(key => {
    let prop = regExp.exec(key)[1] //正则匹配en|zh这样的值
    //messages[prop]相当于 messages['en'] = {table:{...}}
    messages[prop] = langFileds(key).default

})
console.log(messages);
console.log(langFileds('./en.js'));

let locale = localStorage.getItem('lang') || "zh" //从localstorag中获取

export default new VueI18n({
    locale，//指定语言字段
    messages//定义语言字段
})

2.6、修改main.js

下面我们将i18n挂载在main的Vue实例，本案例中也引入了element-ui，如果想要使用element-ui，需要先安装

yarn add element-ui

接下来根据自己的需求编写代码

import Vue from 'vue'
import App from './App.vue'
import ElementUI from "element-ui" //element-ui
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI)

import i18n from "./i18n" //

new Vue({
  render: h => h(App),
  i18n //挂载
}).$mount('#app')

2.7、 App.vue视图展示(navigator.language)

从2.5的代码中我们可以看到，我将locale的属性设置为从localStorage中获取，是为了达到快速的演示效果，但是如果我们在开发中的话要通过计算机的语言来判断，并且进行切换，正确的方法是我们通过navigator.language来获取计算机的语言

<template>
  <div id="app">
    <template>
      <el-table :data="tableData"
                style="width: 100%">
        <el-table-column prop="date"
                         :label="$t('table.date')"
                         width="180">
        </el-table-column>
        <el-table-column prop="name"
                         :label="$t('table.name')"
                         width="180">
        </el-table-column>
        <el-table-column prop="address"
                         :label="$t('table.address')">
        </el-table-column>
      </el-table>

    </template>
    <el-button type="primary"
               @click="change('zh')">点击切换中文</el-button>
    <el-button type="primary"
               @click="change('en')">点击切换英文</el-button>
    <el-button type="primary"
  </div>
</template>
 <script>
  export default {
    mounted() {
      console.log(this.$i18n.t('table.date'));
    },
    methods: {
      change(lang) { //切换方法
        localStorage.setItem('lang', lang)
        window.location.reload() //localSotrage是不响应的，为了演示效果所以直接调用刷新
      }
    },
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
  </script>
  <style>
  #app {
    width: 50%;
  }
</style>

2.8、效果

表头的翻译效果 此处多加了两种语言

点击链接查看效果