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

简介

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

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

安装

安装国际化插件vue-i18n

npm i vue-i18n --save 

添加locales文件

在根目录下(src/)下新建目录 i18n/
在src/i18n/目录下新建en.json文件，对应英文

{     "lang": {         "login": "login"     } } 

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

{     "lang": {         "login": "登录"     } } 

配置vuex

修改src/store/module/language.ts文件，locales和locale

import { Module, VuexModule, Mutation, Action, getModule } from 'vuex-module-decorators'; import { getToken, setToken } from '@/utils/token'; // 设置、获取Token方法 import i18n from '@/i18n/' import store from "@/store";  export interface langState {     locales?: objType [],     locale?: string, } interface objType {     [name:string]: number | string | boolean; } @Module({     dynamic: true,     namespaced: true,     name: "language",     store, }) @Module export default class language extends VuexModule implements langState {     public locales = [         {             value: "en",             label: "英文"         },         {             value: "zh",             label: "中文"         }     ];     // 可以自行更换其他存储方式,本文采用的是token存储方式     public locale = JSON.parse(getToken("langToken")) ? JSON.parse(getToken("langToken")) : "zh";          get getSelectLang(): objType[] {         return this.locales;     }      get getLang(): string {         return this.locale;     }      @Mutation     public CHANGE_LANG(lang: string) {         this.locale = lang;         // 改变i8n的语言 否则不刷新         i18n.locale = lang;         setToken("langToken", JSON.stringify(lang))     } } export const languageStore = getModule(language) 

配置i18n

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

import Vue from 'vue' import store from '../store' import VueI18n from 'vue-i18n' import { languageStore } from "@/store/module/language";  Vue.use(VueI18n)  const messages = {   en: require('./en.json'),   zh: require('./zh.json') } console.log(languageStore.getLang,"当前语言") const i18n = new VueI18n({   locale: languageStore.getLang,   messages })  export default i18n 

修改src/main.ts文件

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

组件中使用

<div class="login-text-align">{{ $t("lang.login") }}</div> 

切换语言

触发languageStore中的CHANGE_LANG即可

配置element-ui

修改src/locales/index.ts文件

import Vue from 'vue' import store from '../store' import VueI18n from 'vue-i18n'  // 引入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'