Vue实现国际化和axios封装

鑫玉
587 阅读5分钟

国际化介绍

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

基本思路如下：

  1. 定义语言包：需要几种语言展示，就定义几个语言包
  2. 创建对象，对语言包进行整合，对象的key 为语言包的引用，值为语言包对象
  3. 创建 vue-i18n类的对象，同时为其 messages 属性为 第2步创建的对象，为其 locale 属性赋值为第2步中语言对象对应的 key
  4. 在创建 Vue 实例对象时，挂载 vue-i18n 类的对象

简单使用

1、安装插件 vue-i18n

默认安装的是最新版本，但它需要Vue3.+版本支持，若我们想在Vue2中使用，可以安装这个版本

 npm i vue-i18n@8.27.1

2、在 main.js 中导入并作为插件使用

import VueI18n from 'vue-i18n'
vue.use(VueI18n)

3、创建语言包对象

// 1、创建中文语言包对象
const zh = {
  username: '用户名',
  email: '邮箱',
  mobile: '手机'
}
// 2、创建英文语言包对象
const en = {
  username: 'Username',
  email: 'Email',
  mobile: 'Mobile'
}
两个对象中的键名是一样的，方便在后面使用(方便)

4、组合对象

const messages = {
  zh: zh,
  en: en
}
名字可以随便起，里面是键值对的形式，若一样时可以简写。

5、创建 vue-i18n对象

// 创建 vue-i18n对象，并为 messages 和 locale 属性赋值
const i18n = new VueI18n({
  messages,
  locale: 'zh'
})
messages属性为第4步中的组合对象名
locale属性为第4步中对象中的某个key的值，注意是字符型；如果设置为 en，则组件中使用第1步中创建的英文语言中包中的对应属性的值，如果设置为 zh，则使用中文语言包中的属性的值。

6、挂载对象到vue实例上

new Vue({
  i18n,
  router,
  render: h => h(App)
}).$mount('#app')
这个 i18n 为上面第5步创建的对象

7、组件中使用

<template>
  <div id="app">
    <p>{{ $t('username') }}</p>
    <p>{{ $t('email') }}</p>
    <p>{{ $t('mobile') }}</p>
  </div>
</template>
注意：表达式时用双花括号，其他时候可以不加，但注意加v-bind(:)
<el-table-column prop="username" :label="$t('username')" width="180">
</el-table-column>
<el-table-column prop="mobile" :label="$t('mobile')" width="180">
</el-table-column>

8、向语言包对象中添加其他字段

const en = {
  username: 'Username',
  email: 'Email',
  mobile: 'Mobile',
  role: 'Role',
  status: 'Status',
  operation: 'Operate'
}
role,status,operation都是新添加的，键值对形式

扩展语言包对象

真是的项目中，可能很多地方都需要国际化，比如表格的表头、tab栏、导航菜单等，我们可以在语言包中创建多个键，分别存储这些模块的语言

const zh = {
  userTable: {
    username: '用户名',
    email: '邮箱',
    mobile: '手机',
    role: '角色',
    status: '状态',
    operation: '操作'
  },
  rolesTable: {
    rolename: '角色名称',
    roledesc: '角色描述',
    roleoperate: '操作'
  }
}
1、可能需要1个语言包对象来对应不同的模块所需要的国际化语法，所以我们需要使用这种复杂的结构来存储。
2、形如这种的对象中并不是直接键值对的情况，我们就要在组件访问中进行响应的变化，如下：
<el-table-column
  prop="username"
  :label="$t('userTable.username')"
  width="180"
>
</el-table-column>
<el-table-column
  prop="mobile"
  :label="$t('userTable.mobile')"
  width="180"
>
</el-table-column>
​
$t中先访问第一层再访问对应的key

mian.js中的use方法细讲

在 main.js中使用了如下：

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
1、引入并使用 use 全局使用了该模块
2、并且挂载到了vue实例上(例如，还有router等)
new Vue({
  i18n,
  router,
  render: h => h(App)
}).$mount('#app')
3、那么就可以通过 this.$router来拿到main.js中引入的router对象(并在组件中使用router的push等方法)，i18n同理。
总结：凡是通过vue.use('插件名称')注册过的vue插件，那么我们就可以在任何组件中使用this.$('插件名称'-上面new Vue中写的名称),比如:this.$i18n.????或者this.$router.????

补充：

 <a href="#" @click.prevent="changeLanguage('zh')">中文</a>
  单击并取消默认行为

less语法
    .language-wrap {
      z-index: 99;
      position: relative;
      width: 150px;
      height: 20px;
      &:hover .language-list {
        display: block;
      }
      // 将鼠标悬浮上去之后，使它的子元素显示(&代表类名为.language-wrap的元素)
      .language-list {
        display: none;
        width: 150px;
        background-color: #ffff;
        border: 1px solid #ddd;
        position: absolute;
        top: 20px;
        left: 0;
        a {
          display: block;
          margin: 0 5px;
          text-decoration: none;
          color: #333;
        }
      }
    }
  }

根据地域设置自动设置语言包

// 创建 vue-i18n对象
const i18n = new VueI18n({
  messages,
  locale: navigator.language
})
将locale属性设置为 navigator.language,它根据浏览器的语言设置来获取地域的语言是什么类型

单独的语言包文件

语言包对象最后可能会比较大，属性比较多，所以最好的办法就是将其定义成单独的 js 文件，然后再进行整合

1、创建语言包文件

src目录下新建 language 目录，最好每一个语言包创建一个对应的 js 文件，然后将上面的语言包代码拷贝进来，因为一会要使用语言包对象，所以要导出

// 1、创建中文语言包对象并导出
export const zh = {
  userTable: {
    username: '用户名',
    email: '邮箱',
    mobile: '手机',
    role: '角色',
    status: '状态',
    operation: '操作'
  },
  rolesTable: {
    rolename: '角色名称',
    roledesc: '角色描述',
    roleoperate: '操作'
  }
}

2、组合对象

我们将整合语言包对象和创建 VueI18n 实例并配置的过程写到一个 js 文件中，然后在 main.js 中导入，

这要 main.js 中代码就会简练很多，毕竟 main.js 中只是最后需要一个 VueI18n 的实例即可

import VueI18n from 'vue-i18n'
import { zh } from './zh'
import { en } from './en'
import { ja } from './ja'
import { korea } from './korea'
import Vue from 'vue'
Vue.use(VueI18n)
// 组合对象
const messages = {
  zh: zh,
  en: en,
  ja: ja,
  korea: korea
}
// 创建 vue-i18n对象
export const i18n = new VueI18n({
  messages,
  locale: navigator.language
})
​

3、在main.js 文件中导入并使用

// main.js 中导入
import { i18n } from './language'(若是index.js则默认可以省略不写)
// 挂载到Vue实例上
new Vue({
  i18n,
  router,
  render: h => h(App)
}).$mount('#app')

axios封装

axios 的封装从以下几方面下手

  • 将 axios 相关代码放到单独文件中
  • 为 axios 添加取消重复请求操作
  • 将请求 api 信息封装到单独文件中

目的：简化代码结构，维护方便，不要把各种请求都放到 main.js 文件中，显得很混乱。

封装

  1. 在 src 目录下新建 api(名称自定义)文件夹
  2. 在 api 目录下新建axios.js(名称自定义)文件
  3. 整合目录，并在main.js中导入需要全局使用的组件

\

avatar
文章
阅读
粉丝