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

超、凢脫俗 2023-10-06 15:32 2阅读 0赞

> 引言:对于一些跨国项目来说，国际化是尤为重要的，那么什么要国际化呢?国际化的意思就是将我们写的项目，能够根据不同国家的语言，进行翻译，进行切换，方便不同国家的客户使用。

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

### **1、i18n** ###

#### **1.1、i18n的安装** ####

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

[安装 | Vue I18nkazupon.github.io][_ 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][_ Vue I18nkazupon.github.io 1]

### **2、在vue-cli项目中使用** ###

#### **2.1、创建i18n文件结构** ####

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

![0884430defc3f801d8bdd6f287eddef5.png][]

**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`传入一个目录进行搜索 <String>
2.  `child`是否要搜索子目录<Boolean>
3.  `regExp`传入正则表达式来匹配哪些文件需要引入<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、效果** ####

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

![db1a288e724d455b299c178e246562f8.gif][]

[_ Vue I18nkazupon.github.io]: https://link.zhihu.com/?target=http%3A//kazupon.github.io/vue-i18n/zh/installation.html
[_ Vue I18nkazupon.github.io 1]: https://link.zhihu.com/?target=http%3A//kazupon.github.io/vue-i18n/zh/started.html%23html
[0884430defc3f801d8bdd6f287eddef5.png]: https://img-blog.csdnimg.cn/img_convert/0884430defc3f801d8bdd6f287eddef5.png
[element-ui]: https://link.zhihu.com/?target=https%3A//element.eleme.cn/%23/zh-CN/component/installation
[db1a288e724d455b299c178e246562f8.gif]: https://img-blog.csdnimg.cn/img_convert/db1a288e724d455b299c178e246562f8.gif