0. Go directly to the preview link
Vue internationalization process VUE-I18N and project automatic switching between Chinese and English
1. Environment construction
Go to the project directory and run the following command to install the vUE internationalization plug-in vuE-i18n
npm install vue-i18n –save
2. Add international translation files to the project
Add the Chinese translation file (zh_cn.js) and The English translation file (en.js) under the project SRC folder to store the information to be translated in the project respectively.
Lang file to obtain the address
3. Project introduction
The vuE-i18n plugin is introduced in the project main.js, and the corresponding translation file (zh_cn.js/en.js) is introduced and combined with element-UI internationalization. In the figure below
4. Project use
Insert the Chinese script for element-ui into the Chinese translation file zh_CN and the English script for element-ui into the English translation file EN, and add the content to the file as follows:
- Zh_CN.js:
- En.js: And then translate where you want to translate.
If it’s element-UI, place a colon before the translation
$t(‘ order.username ‘) $t(‘ order.username ‘)
If it is HTML, write it as follows:
{{$t(‘ order.username ‘)}} will go directly to the translation script for automatic matching.
Select the language and store the record in the cookie.
The selected language is retrieved from the cookie when you open the browser again to access the project initialization.
So that’s the integrationThe source address
Vue study big guy group 493671066, many beauties. Get in the old driver. There’s no time to explain.
Author related Vue articles
Background system permission control based on Vue2.0
Vue2.0 – Skin Based on ElementUI [Custom theme]
Front-end Document Summary
VUE2.0 add delete add edit add Model (popbox) component sharing
To express heartfelt thanks
