vue国际化插件vue-i18n的使用

最新推荐文章于 2024-08-09 07:31:20 发布

wyk760629476

最新推荐文章于 2024-08-09 07:31:20 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/wyk760629476/article/details/115319918

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

安装

命令进入项目目录，执行以下命令安装vue 国际化插件vue-i18n

npm install vue-i18n --save
// 或者
cnpm i vue-i18n --S

全局引用

在main.js文件中使用

import creareI18n from '@assets/i18n/index'// 引入
const i18n = creareI18n() // 创建实例
let masterVue = new Vue({
  i18n,
  router,
  render: h => h(App)
}).$mount('#master')// 挂载到vue上
export default masterVue

使用

elementUI的国际化

import ElementUI from './plugins/element.js'// 引入elementui
import locale from 'element-ui/lib/locale/lang/en' // 引入elementui 英文版本
import creareI18n from '@assets/i18n/index'// 引入
const i18n = creareI18n() // 创建实例
Vue.use(ElementUI, { locale })// 将element的国际化放入Vue
let masterVue = new Vue({
  i18n,
  router,
  render: h => h(App)
}).$mount('#master')// 挂载到vue上
export default masterVue

cronstrue的国际化

import cronstrue from 'cronstrue/i18n'
//cronstrue 是将cron表达式转换成语句的插件
// 例如： 0 0/5 * * * ? * 转换后为：Every 5 minutes

页面使用

创建文件夹存储国际化映射文件

index文件中包含所有的映射文件的引用
文件可以根据自己项目内容切分为不同的目录,便于查找管理
加载顺序是后加载的文件覆盖先前加载的,所以可以把en.js和zh.js当做公共字段使用,放在最后加载

index文件

import VueI18n from 'vue-i18n'
import Vue from 'vue'
import zhMessages from './zh'// 引入中文映射文件
import enMessages from './en'// 引入英文映射文件
import cronZh from './cron/zh'// 引入cron组件的中文映射文件
import cronEn from './cron/en'// 引入cron组件的中英映射文件
Vue.use(VueI18n)
export default (zh = {}, en = {}) => {
  return new VueI18n({
    // 定义默认语言
    locale: localStorage.getItem('language') || 'zh',
    fallbackLocale: 'zh',
    silentTranslationWarn: true, // 去掉警告
    messages: {
      zh: {
        messages: {// 存放所有的中文映射文件
          ...zhMessages,
          ...cronZh,
          ...zh
        }
      },
      en: {
        messages: {// 存放所有的英文映射文件
          ...en,
          ...cronEn,
          ...enMessages
        }
      }
    }
  })
}

en.js

export default {
    http: {
      parameterError: 'Parameter Error',
      400: 'Bad Request',
      401: 'Unauthorized',
      403: 'Forbidden',
      404: 'Not Found',
      405: 'Method Not Allowed',
      408: 'Request Timeout',
      500: 'Internal Server Error',
      501: 'Not Implemented',
      502: 'Bad Gateway',
      503: 'Service Unavailable',
      504: 'Gateway Timeout',
      505: 'HTTP Version Not Supported'
    },
    name: 'Name',
    operation: 'Operate',
    edit: 'Edit',
    remove: 'Remove',
    input: 'Please Input',
    select: 'Please Select',
    time: 'Time'
}

zh.js

export default {
    http: {
      parameterError: '参数错误',
      400: '请求错误',
      401: '未授权，请登录',
      403: '没有权限',
      404: '请求地址出错',
      405: '拒绝访问',
      408: '请求超时',
      500: '服务器内部错误',
      501: '服务未实现',
      502: '网络错误',
      503: '请求超时',
      504: '网络超时',
      505: 'HTTP版本不受支持'
    },
    name: '名字',
    operation: '操作',
    edit: '编辑',
    remove: '删除',
    input: '请输入',
    select: '请选择',
    time: '时间'
}

vue文件中的使用

<template>
    <h4>{{ $t('messages.name') }}</h4>// 在telement中使用
    <h4>{{ http }}</h4>// 在script中使用
</template>
export default {
    data () {
        return {
            http: this.$t('messages.http.404')
        }
    }
}

切换语言类型
this.$i18n.locale,当你赋值为‘zh’时，就变成中文；当赋值为 ‘en’时，就变成英文。
将此字段在登陆时候存入localStorage

总结
映射文件中是一个json格式的数据，为了便于管理，可以根据key值区分
例如http的代码，但是要注意不要出现冲突

export default {
    http: {
      parameterError: '参数错误',
      400: '请求错误',
      401: '未授权，请登录',
      403: '没有权限',
      404: '请求地址出错',
      405: '拒绝访问',
      408: '请求超时',
      500: '服务器内部错误',
      501: '服务未实现',
      502: '网络错误',
      503: '请求超时',
      504: '网络超时',
      505: 'HTTP版本不受支持'
    },
    http: '协议'
}

使用404时候会报错
{{$t('messages.http.404')}}

由于我的模块是分开打包，所以每个模块都要单独可以国际化当前的模块内容，所以都在一级，根据多个文件来区分管理模块