基于Typescript的Vue项目配置国际化

简介

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

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

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

脚手架vue-cli2.x搭建的项目中配置国际化参考：Vue配置国际化

安装

安装国际化插件vue-i18n

npm i vue-i18n --save

添加locales文件

• 在src/下新建目录locales/

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

{
  "about": {
    "title": "About"
  }
}

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

{
  "about": {
    "title": "关于"
  }
}

配置vuex

• 修改src/store/state.ts文件，添加locales和locale

export interface State {
  locales: string[],
  locale: string,
  // ...
}

const state: State = {
  locales: ['en', 'zh'],
  locale: 'en',
  // ...
}
// ...

• 修改src/store/mutations.ts文件，添加setLang

// ...
const mutations: MutationTree<any> = {
  setLang(state: State, locale: string): void {
    if (state.locales.includes(locale)) {
      state.locale = locale
    }
  },
  // ...
}
// ...

配置i18n

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

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

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

Vue.use(VueI18n)

const messages = {
  en: require('./en.json'),
  zh: require('./zh.json')
}

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

export default i18n

• 修改src/main.ts文件

// ...
import i18n from './locales'
// ...
new Vue({
  router,
  store,
  i18n, // 这里添加
  render: (h) => h(App),
}).$mount('#app');

配置element-ui

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

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

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

// 引入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: {
    ...require('./en.json'),
    ...enLocale
  },
  zh: {
    ...require('./zh.json'),
    ...zhLocale
  }
}

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

export default i18n

• 在src/目录下新建types/目录

• 在src/types/目录下新建globel.d.ts文件（文件名无所谓，只有是*.d.ts即可）

// 为 Typescript 配置声明文件
declare module 'element-ui/lib/locale/lang/en'
declare module 'element-ui/lib/locale/lang/zh-CN'

配置vant

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

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

// const enUS: any = require('vant/lib/locale/lang/en-US')
// const zhCN: any = require('vant/lib/locale/lang/zh-CN')

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

• 修改src/main.ts文件

import i18n from './locales'
import { Local } from './locales/vantLocale'
// ...
// 设置语言
Local(store.state.locale)
// ...
Vue.prototype.$Local = Local
// ...
new Vue({
  router,
  store,
  i18n, // 这里添加
  render: (h) => h(App),
}).$mount('#app');

• 在src/目录下新建types/目录

• 在src/types/目录下新建globel.d.ts文件（文件名无所谓，只有是*.d.ts即可）

// 为 Typescript 配置声明文件
declare module 'vant/lib/locale/lang/en-US'
declare module 'vant/lib/locale/lang/zh-CN'

• 在src/types/目录下新建vue.d.ts文件（文件名无所谓，只有是*.d.ts即可）

import Vue from 'vue'
// 为 Typescript 配置声明文件，给Vue 添加 $Local
declare module 'vue/types/vue' {
  interface Vue {
    $Local: any
  }
}

组件中使用

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

切换语言

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Test extends Vue {
  private changeLang() {
    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)
    }
  }
}