i18n English translation

Execute the following command to install the plug-vue vue-i18n internationalization

1 npm install vue-i18n --save

Execute the following command to install js-cookie

npm install js-cookie --save

New folder lang lang folder stored in the following language script src directory:

 

 

 en.js

 1 export default {
 2     // 导航栏
 3     linkArr: [
 4         {content: 'Homepage', id: 'HomePage'},
 5         {content: 'Product', id: 'Product'},
 6         {content: 'information', id: 'InforMation'},
 7         {content: 'AboutUs', id: 'About'},
 8         {content: 'JoinUs', id: 'Join'}
 9         // {content: 'English', id: 'English'}
10     ]
11 }

zh.js

. 1 Export default {
 2      // navigation bar 
. 3      linkArr: [
 . 4          {Content: 'Home', ID: 'the HomePage' },
 . 5          {Content: 'products', ID: 'Product' },
 . 6          {Content: 'News' , ID: 'INFormation' },
 . 7          {Content: 'About us', ID: 'the About' },
 . 8          {Content: 'Join', ID: 'the Join' }
 . 9          // {Content: 'Dictionary Dictionary English', ID : 'Dictionary Dictionary English'} 
10      ]
 . 11 }

index.js

 1 import Vue from 'vue'
 2 import VueI18n from 'vue-i18n'
 3 import Cookies from 'js-cookie'
 4 // import locale from 'element-ui/lib/locale';
 5 import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
 6 import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
 7 import enLocale from './en'
 8 import zhLocale from './zh'
 9  
10 Vue.use(VueI18n);
11  
12 const messages = {
13   en: {
14     ...enLocale,
15     ...elementEnLocale
16   },
17   zh: {
18     ...zhLocale,
19     ...elementZhLocale
20   }
21 };
22 const i18n = new VueI18n({
23     locale: Cookies.get('language') || 'en',
24     messages
25 })
26 export default i18n

main.js

 1 import Vue from 'vue'
 2 import App from './App'
 3 import router from './router'
 4 import ElementUI from 'element-ui'
 5 import 'element-ui/lib/theme-chalk/index.css'
 6 import i18n from './lang'
 7  
 8 Vue.use(ElementUI, {
 9     size: 'medium',
10     i18n: (key, value) => i18n.t(key, value)
11 });
12  
13 new Vue({
14     router,
15     store,
16     i18n,
17     render: h => h(App)
18 }).$mount("#app");

xxx.vue

 1 <template>
 2    <ul>
 3       <router-link :to="{path: '/' + item.id}" v-for="(item,index) in $t('linkArr')" :key="index">
 4           <div class="line" v-if="5===index"></div>
 5       </router-link>
 6       <li @click="liClick1">
 7           <span>English</span>
 8       </li>
 9    </ul>
10 </template>
11  
12 methods: {
13     liClick1() {
14        if (this.$i18n.locale === 'zh') {
15           the this $ i18n.locale = 'EN'. ;
 16            // save the state to the global management of the new language 
. 17            the this $ store.dispatch ( 'update_current_lang', 'EN'. );
 18 is            Cookie.set ( 'Language', 'EN ' );
 . 19          } the else {
 20 is            the this . i18n.locale $ =' ZH ' ;
 21 is            // save the new language to manage global state 
22 is            the this $ store.dispatch (.' update_current_lang ',' ZH ' );
 23 is            Cookie. SET ( 'Language', 'ZH' );
 24          }
 25      }
 26 is }

 

Guess you like

Origin www.cnblogs.com/xiaozhu-zhu/p/11946870.html