基於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'

地址: https://www.cnblogs.com/yurui321/p/14765318.html