1. Download dependencies

The terminal enters the project and executes the command to install the internationalization plug-in VUE-i18n

npm install vue-i18n --save

2. Create an international language file

Add folder lang to the project SRC folder and add language files, such as The Chinese translation file zh-cn. js and the English translation file en.js, to store the content to be translated

zh-CN.js

Module. exports = {colorpicker: {confirm: 'confirm ', clear:' clear '}, datepicker: {now: 'now ', today:' today ', cancel: 'cancel ',' clear ', 'confirm ',' selectDate ', 'selectTime ',' startDate ', 'startDate ', startTime: 'start time ', endDate:' endDate '}, pageHeader: {title: 'return'}, popconfirm: {confirmButtonText: 'confirm ', cancelButtonText: 'Cancel'}, empty: {description: 'no data'}}Copy the code

3. Introduce vuE-i18N plug-in

Add the index.js folder to the project SRC folder, add the index.js file to the lang folder, and then add the language file to main.js.

index.js

import Vue from 'vue' import VueI18n from 'vue-i18n' import Cookies from 'js-cookie' import zhLocale from './zh-CN' import enLocale from './en' Vue.use(VueI18n) const messages = { en: { ... enLocale, ... elementEnLocale }, zh: { ... zhLocale, ... elementZhLocale } } const i18n = new VueI18n({ locale: Cookies.get('language') || 'zh', // set locale messages // set locale messages }) export default i18nCopy the code

Introduced the main. Js

4. Use in the project

{{$t(‘language.title’)}} or :value=”$t(‘language.title’)”

5. Introduce Element translation files in conjunction with Element internationalization

import elementEnLocale from 'element-ui/lib/locale/lang/en'
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'
Copy the code

Element’s official documentation: Element Internationalization