uniapp实现国际化多语言切换

前言

项目有海外用户所以需要配置多语言满足客户需求

解决方法

在uni-app里有内置i18n多语言的配置，并且uni-app里的组件可是可以支持跟随设置语言进行变换的，i18n的主要功能是可以做到实时切换语言。

步骤

1. 在相对根目录 utils/lang 的文件夹创建js的语言文件。当然，也可以根据实际情况，在其他目录下。这里，使用了两种语言，en-US （英文）和zh-CN(简体中文)。

2. 打开main.js引入 vue-i18n 和语言包，并根据需要默认其中一种语言。

1. import VueI18n from 'vue-i18n'  
   
2. import enUS from 'common/lang/en-US.js'
   
3. import zhCN from 'common/lang/zh-CN.js'
   
4. Vue.use(VueI18n)  
   
5. const locales={
   
6. 　　'en-US':enUS,
   
7.     'zh-CN':zhCN
   
8. };
   
9. const i18n = new VueI18n({  
   
10.   locale: 'zh-CN',  // 默认选择的语言
    
11.   messages : locales
    
12. })
    
13. Vue.prototype._i18n = i18n
    
14. const app = new Vue({
    
15.   i18n,
    
16.     ...App
    
17. })
    
18. app.$mount()

复制代码