Vue project configuration internationalization based on typescript

Time:2022-8-2

Vue project configuration internationalization based on typescript

brief introduction

Use the vue-i18n plug-in to configure internationalization for Vue projects based on typescript, switch multiple languages, and cooperate with element UI or other UI libraries

This article takes the configuration of Chinese and English as an example

install

Install the internationalization plug-in vue-i18n

npm i vue-i18n --save

Add locales file

Create a new directory I18N under the root directory (src/)/
Create a new en.json file in src/i18n/ directory, corresponding to English

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

Create a new zh.json file in src/i18n/ directory, corresponding to Chinese

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

Configure vuex

Modify the src/store/module/language.ts file, locales and locales

import { Module, VuexModule, Mutation, Action, getModule } from 'vuex-module-decorators';
import { getToken, setToken } from '@/utils/token'; //  Set and get token methods
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: "English"
        },
        {
            value: "zh",
            Label: "Chinese"
        }
    ];
    //You can change other storage methods by yourself. This paper uses token storage method
    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;
        //Change the language of i8n, otherwise do not refresh
        i18n.locale = lang;
        setToken("langToken", JSON.stringify(lang))
    }
}
export const languageStore = getModule(language)

Configure I18N

Create a new index.ts file in the src/i18n/ directory

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, "current language")
const i18n = new VueI18n({
  locale: languageStore.getLang,
  messages
})

export default i18n

Modify src/main.ts file

//Internationalization
import i18n from './i18n'
new Vue({
  router,
  store,
  I18N, // add here
  render: (h) => h(App),
}).$mount('#app');

Used in components

{{ $t("lang.login") }}

switch language

Trigger change in languagestore_ Lang is enough

Configure element UI

Modify the src/locales/index.ts file

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

//Language pack for introducing 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
})
//Configure component internationalization of element UI
ElementLocale.i18n((key, value) => i18n.t(key, value))

export default i18n

Create a new types/ directory under src/ directory

Create a new globel.d.ts file in the src/types/ directory (the file name doesn’t matter, only *.d.ts can be used)

//Configure a declaration file for typescript
declare module 'element-ui/lib/locale/lang/en'
declare module 'element-ui/lib/locale/lang/zh-CN'

Address:https://www.cnblogs.com/yurui321/p/14765318.html

Recommended Today

The process of initializing std:: string with illegal c style string (null pointer or not ending with ‘\0’) in c++ standard library

There are two possible error conditions when initializing std:: string with C-style string: Pass in null pointer, The passed in C-style string does not end with ‘\0’. In g++ (GCC) 11.2.0, the code of initializing std:: string (basic_string) with C-style string is as follows: basic_string(const _CharT* __s, const _Alloc& __a = _Alloc()) : _M_dataplus(_M_local_data(), __a) […]