Vue配置国际化

介绍

使用vue-i18n插件对vue项目配置国际化，切换多种语言, 配合element-ui或者vant

以配置中英文两种语言为例

所有语言和选择的语言存储在vuex中

Typescript中配置国际化参考：基于Typescript的Vue项目配置国际化

安装

安装国际化插件vue-i18n

npm i vue-i18n --save

添加locales文件

• 在src/下新建目录locales/
• 在src/locales/目录下新建en.js文件，对应英文

const message = {
  links: {
    home: 'Home',
    about: 'About'
  },
  home: {
    title: 'Welcome',
    introduction: 'This is an introduction in English.'
  },
  about: {
    title: 'About',
    introduction: 'This page is made to give you more informations.'
  }
}

export default message

• 在src/locales/目录下新建zh.js文件，对应中文

const message = {
  links: {
    home: '首页',
    about: '关于'
  },
  home: {
    title: '欢迎',
    introduction: '汉语中的介绍部分'
  },
  about: {
    title: '关于',
    introduction: '该页面用于提供更多的关于我们信息'
  }
}

配置vuex

• 修改src/store/index.js文件，添加locales和locale

// ...
const state = {
  locales: ['en', 'zh'],
  locale: 'en',
  // ...
}
// ...
const mutations = {
  setLang(state, locale) {
    if (state.locales.includes(locale)) {
      state.locale = locale
    }
  },
  // ...
}
// ...

配置i18n

• 在src/locales/目录下新建index.js文件

import Vue from 'vue'
import store from '../store'
import VueI18n from 'vue-i18n'

import en from './en'
import zh from './zh'

Vue.use(VueI18n)

const messages = {
  en,
  zh
}

const i18n = new VueI18n({
  locale: store.state.locale,
  messages
})

export default i18n

• 修改src/main.js文件

// ...
import i18n from './locales'
// ...
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  i18n, // 这里添加
  components: { App },
  template: '<App/>'
})

配置element-ui

• 修改src/locales/index.js文件

import Vue from 'vue'
import store from '../store'
import VueI18n from 'vue-i18n'

import en from './en'
import zh from './zh'

// 引入element-ui的语言包
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import ElementLocale from 'element-ui/lib/locale'

Vue.use(VueI18n)

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

const i18n = new VueI18n({
  locale: store.state.locale,
  messages
})
// 配置element-ui的组件国际化
ElementLocale.i18n((key, value) => i18n.t(key, value))

export default i18n

配置vant

• 在src/locales目录下添加vantLocale.js文件

import { Locale } from 'vant'
import enUS from 'vant/lib/locale/lang/en-US'
import zhCN from 'vant/lib/locale/lang/zh-CN'

export function Local(a) {
  if (a === 'en') {
    Locale.use('en-US', enUS)
  } else if (a === 'zh') {
    Locale.use('zh-CN', zhCN)
  }
}

• 修改src/main.js文件

// ...
import i18n from './locales'
import { Local } from './locales/vantLocale'
// ...
// vant 设置语言
Local(store.state.locale)
// ...
Vue.prototype.$Local = Local
// ...
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  i18n, // 这里添加
  components: { App },
  template: '<App/>'
})

组件中使用

<h1 class="Content__Title">
  {{ $t('about.title') }}
</h1>

切换语言

// ...
export default {
  // ...
  methods: {
    // ...
    changeLang(locale) {
      // const locale = this.$store.state.locale === 'en' ? 'zh' : 'en'
      if (this.$store.state.locales.indexOf(locale) !== -1) {
        this.$i18n.locale = locale
        this.$Local(locale) // vant需要手动修改下
        this.$store.commit('setLang', locale)
      }
    },
    // ...
  }
  // ...
}