语言国际化----vue-i18n

// uniapp

1. 安装依赖包
   npm i vue-i18n –S
2. 在根目录创建一个 lang的文件夹,并且在lang文件夹内创建cn.js 和 en.js
3. 打开 main.js, 注入Vue实例中
?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

import Vue from 'vue' import App from './App' import VueI18n from 'vue-i18n' // 语言国际化   Vue.use(VueI18n) Vue.prototype._i18n = i18n   App.mpType = 'app'   const i18n = new VueI18n({     locale:'cn',//默认中文，也可根据系统语言动态设置     messages:{         'cn':require('./lang/cn.js'),//中文包         'en':require('./lang/en.js'),// 英文包     } }) const app = new Vue({     ...App,     i18n }) app.$mount()

4. 配置语言包, 并且暴露出去:
   cn.js
   
   en.js
   
5. 页面渲染:
   
   
   
   
6. 切换语言:
   
   
   
?

1 2 3 4 5 6 7

tooglang(){                 if(this.$i18n.locale == 'cn'){                     this.$i18n.locale = 'en'                 }else{                     this.$i18n.locale = 'cn'                 }             }

7. 
   
8. tabBar 语言切换用
   
   
?

1 2 3 4

uni.setTabBarItem({       index: 1,       text: that.$t('tabBar.index1')     });

---

如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。