关于vue3:vuei18n国际化语言在项目中的使用

0次阅读

共计 2815 个字符，预计需要花费 8 分钟才能阅读完成。

为什么要国际化？
前端国际化：利用要服务于不同的地区的用户，所以利用不能繁多语言；利用要能让不同地区的人无障碍应用就须要实现国际化。
目前在各大商城我的项目中，对于国际化语言的需要越来越高了，其中最多的就是 vue 我的项目应用 i18n 插件实现多语言切换性能，最近有幸我刚好做了这方面的业务，上面是我对 vue-i18n 国际化语言的一点总结与记录

注释
我的项目中通常通过抉择语言，或者标签的切换来展现不同的语言，管制语言的配置信息在 locale 中。

1. 引入多语言
首先在 main.js 中进行引入并注册 vue-i18n，引入中文语言包和英文语言包（依据开发需要引入语言包）

//main.js
// 多语言引入
import VueI18n from 'vue-i18n'
import en from './locale/en.json' // 英文
import zhHans from './locale/zh-Hans.json' // 中文
Vue.use(VueI18n)

let i18nConfig = {locale: uni.getLocale(),// 获取已设置的语言
  messages: {
    en,
    'zh-Hans': zhHans,
  }
}

const app = new Vue({
    ...App,
    i18n,
})
app.$mount();

2. 语言包文件
创立 json 文件，放入你须要的语言，我的项目中咱们应用了中文和英文，能够依据开发的需要创立须要的语言文件，留神每个语言包中的字段名要保持一致。

zh-Hans.json，en.json 的构造如下

//zh-Hans.json
{"home": "首页"}

//en.json
{"home": "home"}

3. 设置默认语言
这里设置的是默认语言为中文，能够依据开发语言自行设置

header['cb-lang'] = uni.getStorageSync('locale') ? uni.getStorageSync('locale') :'zh_cn'

4. 在页面中应用
应用 $t(‘ 字段名 ’)在 html 中获取，应用 this.$t(‘ 字段名 ’)在 js 中获取

<template>  
    <view>  
        <text>{{$t('home')}}</text>
        <view v-text="$t(`home`)"></view>
    </view>  
</template>  

<script>
    export default {data() {
            return {home: this.$t(`home`)
            }
        }
    }
</script>

5. 在页面中切换语言
通过事件触发，点击切换语言，管制 locale 的值，调用对应的语言包，这里是通过点击图标切换语言（我的项目中只用到两种语言），应用多种语言时也能够通过抉择语言来管制切换，判断目前应用的语言，点击图标后将另一个语言赋给 locale，而后将该语言存储在本地缓存中

<view class="message">
    <view hover-class="none" @click="locale()">
        <view v-if="$i18n.locale =='zh-Hans'"class="iconfont icon-jinbi_o"></view>
        <view v-if="$i18n.locale =='en'"class="iconfont icon-yue"></view>
    </view>
</view>
methods: {locale(){if(this.$i18n.locale=='zh-Hans'){
            this.$i18n.locale = 'en';
            uni.setStorageSync('locale', 'en_us')
        }else if(this.$i18n.locale=='en'){this.$i18n.locale = 'zh-Hans';                                                                               uni.setStorageSync('locale', 'zh_cn')
        }
    },
}

遇到的问题
1. 切换语言申请头语言不扭转
调试的时候，不刷新页面，config.js 只能触发一次，然而 request.js 外面这个申请办法每次都会触发，所以在 request.js 里把批改的 cb_lang 加上就会及时触发，这样调用接口后，后端就能够返回不同的语言数据了

//request.js

header['cb_lang'] = uni.getStorageSync('locale') ? uni.getStorageSync('locale') :'zh_cn'

2. 在 until.js 等一些公共办法的文件中无奈应用 this.$t
在公共的 js 文件中，无奈应用 this 来援用曾经注册的组件，咱们须要申明一个 i18n 对象，导出应用

import en from './en.json'
import zhHans from './zh-Hans.json'
import Vue from 'vue'; 
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({locale: uni.getStorageSync('locale') ? uni.getStorageSync('locale') :'zh_cn',// 默认为中文
    messages: {
        'en_us':en,
        'zh_cn': zhHans,
    }
})
export default i18n 
在公共文件中，就能够间接应用 i18n.t('')来获取语言了

    if (!noAuth) {
        // 登录过期主动登录
        if (!store.state.app.token && !checkLogin()) {toLogin();
            return Promise.reject({msg: i18n.t(`not_logged_in`)
            });
        }
    }

总结
在一些多语言我的项目中，固定的文字就须要定义在语言包中，通过 locale 管制语言的类型扭转语言包，就能够实现国际化预言了。须要留神在一些公共 js 文件中，无奈应用 this, 咱们就须要申明一个 i18n 对象，导出应用；在写语言包时，须要留神语言包中的字段名须要保持一致，在申请头中通过切换语言来扭转申请头的语言，调用接口后，后端就能够返回不同的语言数据了。在实现我的项目时，肯定肯定要仔细，不然一个字母写错了，就会呈现在每个文件中重复找。应用多语言时，会发现每种语言的语序会有一些差异，也是我的项目中须要留神的中央。写完后应该多留神页面的款式有没有呈现问题，比方开始是中文，切换成英文时，因为英文较长会导致页面款式发生变化，还须要优化。

源码附件曾经打包好上传到百度云了，大家自行下载即可～

链接: https://pan.baidu.com/s/14G-b…
提取码: yu27
百度云链接不稳固，随时可能会生效，大家放松保留哈。

如果百度云链接生效了的话，请留言通知我，我看到后会及时更新～

GIT 我的项目举荐：蕴含多端免受权可商用

附件地址：https://gitee.com/ZhongBangKeJi

正文完