前端vue实现国际化

这个功能是根据浏览器语言实现自动切换翻译语言，需要替换项目文件中所有展示的中文字句

安装依赖

1.先在项目中安装vue-i18n的依赖

npm install vue-i18n --save
1

创建文件

在src文件夹下创建lang文件夹，如下图所示：

1.lang文件夹下的index.js文件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementEsLocale from 'element-ui/lib/locale/lang/es' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import enLocale from './en'
import zhLocale from './zh'
import esLocale from './es'

Vue.use(VueI18n)

const messages = { 
  en: { //英文语言包
    ...enLocale,
    ...elementEnLocale
  },
  zh: { //中文语言包
    ...zhLocale,
    ...elementZhLocale
  },
  es: { //西班牙语语言包
    ...esLocale,
    ...elementEsLocale
  },
}


const model = [
  'Base'
] 
model.forEach((key) => {
  // eslint-disable-next-line
  const value = require(`./i18n/${key}`).default

  Object.keys(value).forEach((k) => {
    const { en, zh, es } = value[k]
    messages.en[key] = messages.en[key] || {}
    messages.zh[key] = messages.zh[key] || {}
    messages.es[key] = messages.es[key] || {}

    messages.en[key][k] = en
    messages.zh[key][k] = zh
    messages.es[key][k] = es
  })
})

export function getLanguage() {
  const chooseLanguage = Cookies.get('language')
  if (chooseLanguage) return chooseLanguage

  // if has not choose language
  const language = (navigator.language || navigator.browserLanguage).toLowerCase()
  const locales = Object.keys(messages)
  for (const locale of locales) {
    if (language.indexOf(locale) > -1) {
      return locale
    }
  }
  return 'zh'
}
const i18n = new VueI18n({
  // set locale
  // options: en | zh | es
  locale: getLanguage(),
  // set locale messages
  messages,
  silentTranslationWarn: true
})

export default i18n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

2.在lang文件夹下的i18n文件夹中的index.js文件（主要是做重复公共类定义与翻译）

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import enLocale from 'element-ui/lib/locale/lang/en'
import esLocale from 'element-ui/lib/locale/lang/es'

const lang = {
  en: {
    ...enLocale,
  },
  zh: {
    ...zhLocale,
  },
  es: {
    ...esLocale,
  },
}

const model = [
  'Base',
]
model.forEach((key) => {
  // eslint-disable-next-line
  const value = require(`./${key}`).default

  Object.keys(value).forEach((k) => {
    const { en, zh, es } = value[k]
    lang.en[key] = lang.en[key] || {}
    lang.zh[key] = lang.zh[key] || {}
    lang.es[key] = lang.es[key] || {}

    lang.en[key][k] = en
    lang.zh[key][k] = zh
    lang.es[key][k] = es
  })
})

export default lang
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

3.Base.js文件

export default {
  add: {
    zh: '新增',
    en: 'New',
    es: 'Nuevo'
  },
  ...//自定义
}
1
2
3
4
5
6
7
8

4.zh.js文件(其余语言文件定义变量语法格式同下，翻译同一处必须为同一变量名)

export default {
  index: {
    dashboard: '首页',//en.js文件'Home page'   es.js文件'En la primera página'
    profile: '个人中心',
    order:'序号',
    name:'名称',
    input:'请输入'
  },
  ...//自定义
}
1
2
3
4
5
6
7
8
9
10

挂载

main.js文件

import i18n from './lang' // internationalization

Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value),
  size: Cookies.get('size') || 'medium' // set element-ui default size
})

export default new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

使用

1.使用在html标签字

<div>{{$t('Base.add')}}div>
1

2.使用在element表格

<el-table-column prop="order" :label="$t('index.order')">el-table-column>
1

3.使用在element表单及校验

<el-form-item :label="$t('index.name')+`:`" prop="name">
  <el-input v-model="form.name" :placeholder="$t('index.input')">el-input>
el-form-item>
1
2
3

rules: {
    name: [{ required: true, message: this.$t('index.input'), trigger: "blur" }],
},
1
2
3

4.使用在export的js文件

import vm from "@/main"

export const statusList = [
    {
        label: vm.$t('Base.WaitActivate'), //等待执行
        value: "0",
    },
    {
        label: vm.$t('Base.activated'), //已执行
        value: "1",
    },
]
1
2
3
4
5
6
7
8
9
10
11
12