Vue前端项目国际化

1.下载依赖

终端进入项目，执行命令安装国际化插件vue-i18n

`npm install vue-i18n --save`

2.新建国际化语言文件

项目src文件夹下添加文件夹lang并添加语言文件，例如：中文翻译文件zh-CN.js，英文翻译文件en.js,用于存放页面需要翻译的内容

zh-CN.js

module.exports = {
  colorpicker: {
    confirm: '确定',
    clear: '清空'
  },
  datepicker: {
    now: '此刻',
    today: '今天',
    cancel: '取消',
    clear: '清空',
    confirm: '确定',
    selectDate: '选择日期',
    selectTime: '选择时间',
    startDate: '开始日期',
    startTime: '开始时间',
    endDate: '结束日期'
  },
  pageHeader: {
    title: '返回'
  },
  popconfirm: {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  },
  empty: {
    description: '暂无数据'
  }
}

3.引入vue-i18n插件

项目src文件夹下添加文件夹lang下添加index.js,将语言文件引入,然后在main.js中引入。

微信截图_20210702104125.png

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import zhLocale from './zh-CN'
import enLocale from './en'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}

const i18n = new VueI18n({
  locale: Cookies.get('language') || 'zh', // set locale
  messages // set locale messages
})

export default i18n

main.js引入

4.项目中使用

vue中使用：{{$t('language.title')}} 或 :value="$t('language.title')"
JS中使用： this.$t('language.title')

5.结合Element国际化,引入Element翻译文件

import elementEnLocale from 'element-ui/lib/locale/lang/en'
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'

Element官方文档：Element国际化