One, foreword
In 4K advertising machine, it is necessary to realize multi-language switch. At this time, when it comes to internationalization, there are countless front-end frameworks, among which several popular frameworks have matching internationalization plug-in tools. Such as:
vue+vue-i18nangular+angular-translatereact+react-intljquery+jquery.i18n.property
The front-end framework used in 4K advertising machine project is Vue, so we will use the plug-in VUE-I18N to realize the internationalization function.
Two, the final effect
Realization of internationalization
1. Install vuE-I18N dependencies in your own project first. NPM is used for installation here. If you do not have scientific Internet access, please use CNPM for installation.
npm install vue-i18n --save-dev
2. Introduce I18N into vUE instance and implement call API and template syntax in project. Now introduce vue-i18n in main.js.
import VueI18n from 'vue-i18n'Vue-i18n vue. use(VueI18n); / / in the form of a plug-in mount / * -- -- -- -- -- -- -- -- -- basic use -- -- -- -- -- -- -- -- -- -- - * / const i18n = new VueI18n ({locale:'CN'En: {message: {hello:'hello world'
}
},
cn: {
message: {
hello: 'Hello world'}}}}) / * -- -- -- -- -- -- -- -- -- the use of language pack -- -- -- -- -- -- -- -- -- -- - * / const i18n = new VueI18n ({locale:'zh', // language identifier //this.$i18n.locale // Switch the locale value to switch the language messages: {'zh': require('./common/lang/zh'), // Chinese language package'en': require('./common/lang/en'}}) /* eslint-disable no-new */ new Vue({el:'#app', i18n, // Mount to the instance in this position, not in comonents template:'<App/>',
components: {
App
}
});
Copy the codeThe above code formally introduces VUE-i18n into the VUE project, creating an i18N instance object for global invocation. We use this.$i18n.locale to switch languages.
3. Next we need to create two NEW JS files (or josn files) as the language package.
Where the code in en.js language package is:
module.exports = {
message: {
login: 'Login',
Username: 'Username',
Password: 'Password',
Captcha: 'Captcha',
Language: 'Language',
zh: 'Chinese',
en: 'English'}}Copy the codeWhere the code in the zh.js language package is:
module.exports = {
message: {
login: 'login',
Username: 'Username',
Password: 'password',
Captcha: 'Captcha',
Language: 'language',
zh: 'Chinese',
en: 'English'}}Copy the codeAnd then finally, we just need to control the locale value by triggering the event, calling the corresponding language package, and we can do internationalization.
4. The component triggers the event to switch the locale value, thus realizing the language switch. The template code:
<div class="lang">
<el-radio-group v-model="language" size="mini">
<el-radio v-for="item of lang" :label="item.value" border>{{item.label}}</el-radio>
</el-radio-group>
</div>
Copy the codeScrpit code:
import Vue from 'vue'
export default {
mounted() {
this.$i18n.locale === 'zh'? This. language = 0: this.language = 1data() {
return {
language: 0,
lang: [{
label: this.$t('message.zh'Value: 0}, {label: this.$t('message.en', value: 1}],}}, watch: {// listener language:function(val) {// Listen for radio buttons to switch languages val === 0? this.$i18n.locale = 'zh' : this.$i18n.locale = 'en';
Vue.set(this.lang, 0, {label: this.$t('message.zh'), value: 0});
Vue.set(this.lang, 1, {label: this.$t('message.en'), value: 1})
/**
this.lang: [{
label: this.$t('message.zh'Value: 0}, {label: this), // If you do not use vue. set, you can also use the method to update the data.$t('message.en'),
value: 1
}]
**/
}
},
}
Copy the codeNote: Due to JavaScript limitations, Vue cannot detect the currently changing array. It only renders once. If the data does not update the view, the component will not be updated.
Vue – I18N data rendering template syntax
Template syntax is tentatively divided into three types:
// Use the vue component template <div>{{$t('message.zh'}}</div> // Use of vUE component template data binding <input :placeholder="$t('message.zh')"></input> //vue component data assignment using data:{MSG :this.$t('message.zh');
}
Copy the code5. Compatibility between Element UI component library and VUE-I18N
Because the project uses the Element UI component library, some of its built-in text needs to be internationalized, but Element UI is internationalized. But Element UI is only compatible with vuE-I18n’s 5.x version by default, and vuE-I18n is now compatible with vue-I18n’s 7.x version, as detailed in the “Internationalization” section of the Official Element UI documentation. Post the manual Settings below:
import Vue from 'vue'
import ElementUI from 'element-ui'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'// Import zhLocale from Element UI'element-ui/lib/locale/lang/zh-CN'Vue. Use (VueI18n); Vue.use(ElementUI, { i18n: (key, value) => i18n.t(key, value) }); Const i18n = new VueI18n({locale:'zh', // Messages: {zh: object. assign(require('@/components/common/lang/zh'En: object.assign (require()), zhLocale), //'@/components/common/lang/en'), enLocale),
}
});
Copy the codeNote: I found a solution to the problem of importing multiple language packages in the Element UI internationalization documentation.
Syntax issues for internationalization of routing and breadcrumb navigation
Did not know how to internationalize breadcrumb navigation. Browsing some information on the Internet, get the following code, perfect solution to the problem:
Router.js (Routing configuration file)
{
path: '/index',
name: 'nav.Home'Component: (resolve) => require([)'@/components/index'], resolve)
}
Copy the codeVue (Breadcrumb navigation Kit)
<div id="Breadcrumb">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/index' }"> {{$t('nav.Home'}}</el-breadcrumb-item> /* Notice {{$t(item.name)}}*/
<el-breadcrumb-item v-for="item in $route.matched" :to="{ path: item.path}"> {{$t(item.name)}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
Copy the code