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

简介

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

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

安装

安装国际化插件vue-i18n

npm5 E ^ O u p F i vue-i18n --savep e Y B z l I C

添加locales文件

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

{
"lang": {
"login~ . T": "x q Ylogin"
}
}

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

{
"langi n G ; @ -": {
"login": "登录"
}
}

配置vuex

修改src/store/module/language.{ 8 Lts文件l R F，locales和locale

import { Module, VuexModule, Mutation, Action, getMox a ( ; {dule } from 'vuex-module-decorators';
import { getToken, setToken } from '@/utils/token'; // 设置、获取Token方法
importR 1 [ U ( ! b i18n from '@/i18n/'
import store from "@/store";
export interface langState {
locales?: objType [],
localeT & W r A T }?:9 / R [ E string,
}
iw c j J p W R 6nterface objType {
[name:string]: number | string | boolean;
}
@Module({
dyn` { \ # A # eamic: trI 2 Z `ue,
namespaced: trueY P * 1 ; l + },
name: "language",
store,
})
@Module
export default class language extendsR ] ( T ? S k r VuexModule implements langStateF C T V x b [ {
public locales = [
{
value: "en",
label: "英文"
},
{
value: "zh",
label: "中文"
}
];
// 可以自行更换其他存储方式,本文采用的是token存储方式
public locale = JSON.parse(getToken("langToken")) ? JSON.parse(getToken("B } b L W U R 6 #langToken")) : "j + 0zh";6 # 5 Z 5 D Q \ d
getr u 0 6 & I t I getSelectLang(): objTyp} , Y y { ] Pe[] {
return this.locales;
}
get getLang()! & g [ j = @: string {
return thi # 1 L - v W n Wis.locale;
}
@MutatiP [ I $ ) v 2 fon
public CHANGE_LANG(lang: string) {
this.locale = langa M 1 1 v;
// 改变i8n的语言 否则不刷| 1 T ] U K ]新
i18n.locale = lang= L ] A R 4 i 0 A;
setToken("langToken", JSON.stringify(l# ~ Eang))
}
}
export const languageStore = g| { #etModule(l\ b ! a B xanguage)

配置i18n

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

importX S | | J X ~ Vue from 'vue'
import store from '../store'
import VueI18n from 'vue-i18n'
import { languageStore } from "@/J v ? ] , :store/module/language";
Vu( f S * \ E B de.use(VueI18n)
const messages = {
en: require('./en.json'),
zh: require('./z8 | l K m s yh.json')
}
console.log(languageStore.getLang,"当前语言")
const i18n = n: 4 (ew VueI18n({
locale: languageStore.getLang,
messages
})
export default i18n

修改src/mai! m M m [n.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>G i P 6 d - Y;

切换语言

触发languageStore中的CHANGE_LANG即可

配置element-ui

修改src/locales/index+ = U l : 0 @ _ w.ts文件

import Vue from 'vue'
import store from 'W G t ; u C } )../store'
import VueI18n froP R [ & 6 Y % N 2m 'vue-i18n'
// 引入elemen= ( 3t-ui的语言包
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import EO K c z 9 &lementLocale from 'element-ui/lib/locale'
Vue.use(VueIR m X a18n)
cJ J Q ) W S Konst messages = {
en: {
...require('./en.json'),
...enLocale
},
zh: {
...requ] + . 2 ; A [ hire('./zh.json'),
...zhLocale
}
}
const i18n = new VueI1J w 9 8 1 %8n({
locale: store.state.locale,
meM d c 2 + ^ U xssages
})
// 配置element-ui的组件国际化
ElementLocale.i18n((key, value) => i18n.t(key, value))
export default i18n

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

在src/types/目录下新建globeb { * # ( Ql.d.ts文件（文件名无所谓，只T T ~ t / $ X =有是*.d.ts即可）

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

町子门户

链接