vue 国际化语言包
vue 2018-01-24 09:11:08

参考文档：https://kazupon.github.io/vue-i18n/en/

 

安装：

 

1、插件安装

JavaScript Code复制内容到剪贴板
  1. cnpm install vue-i18n  

 

2、CDN方法：

XML/HTML Code复制内容到剪贴板
  1. <script src="https://unpkg.com/vue/dist/vue.js"></script>  
  2. <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>  

 

 

使用：

XML/HTML Code复制内容到剪贴板
  1. <script>  
  2. /* 国际化使用规则 */  
  3. import Vue from 'vue'  
  4. import VueI18n from 'vue-i18n'  
  5.   
  6. Vue.use(VueI18n)  
  7.   
  8. const messages = {  
  9.   en: {  
  10.     message: {  
  11.       hello: 'world hello'  
  12.     }  
  13.   },  
  14.   zh: {  
  15.     message: {  
  16.       hello: '世界'  
  17.     }  
  18.   }  
  19. }  
  20.   
  21. const i18n = new VueI18n({  
  22.   locale: 'zh',  
  23.   messages  
  24. })  
  25.   
  26. export default {  
  27.   data () {  
  28.     return {  
  29.       hello: this.$t('message.hello')  
  30.     }  
  31.   },  
  32.   i18n  
  33. }  
  34.   
  35. </script>  

 

HTML

XML/HTML Code复制内容到剪贴板
  1. <div id="#app">  
  2.   <p>{{ $t("message.hello") }}</p>  
  3. </div>  

 

 

 

脚手架中使用：

JavaScript Code复制内容到剪贴板
  1. import i18n from './lang' //语言包  
  2.   
  3. //对所使用的框架启用语言，可以忽略  
  4. Vue.use(MintUI, {  
  5.     i18n: (key, value) => i18n.t(key, value)  
  6. })  
  7.   
  8.   
  9.     new Vue({  
  10.         el: '#app',  
  11.         router,  
  12.         store,  
  13.         i18n, //添加语言包  
  14.         render: h => h(App)  
  15.     })  

 

lang文件夹，放在src目录下

 

HTML使用：

XML/HTML Code复制内容到剪贴板
  1. {{$t('cms.contentDetail.courseType')}}  
  2.   
  3. {{$t('cms.contentDetail.publishName')}}  

 

 

 

 

 

 

 

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/277.html

上一篇 Vue2键盘事件：keydown/keyup...
下一篇 vue 引入sass配置
相关的文章
Powered by yoyo苏ICP备15045725号