i18n 中英文翻译

执行以下命令安装vue 国际化插件vue-i18n

1 npm install vue-i18n --save

执行以下命令安装 js-cookie

npm install js-cookie --save

在src目录下 新建lang文件夹 在lang文件夹下存放 语言脚本 如下：

 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     // 导航栏
 3     linkArr: [
 4         {content: '首页', id: 'HomePage'},
 5         {content: '产品', id: 'Product'},
 6         {content: '资讯', id: 'InforMation'},
 7         {content: '关于我们', id: 'About'},
 8         {content: '加入我们', id: 'Join'}
 9         // {content: 'English', id: '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           this.$i18n.locale = 'en';
16           // 将新语言保存到全局状态管理
17           this.$store.dispatch('update_current_lang', 'en');
18           cookie.set('language', 'en');
19         }else {
20           this.$i18n.locale = 'zh';
21           // 将新语言保存到全局状态管理
22           this.$store.dispatch('update_current_lang', 'zh');
23           cookie.set('language', 'zh');
24         }
25     }
26 }