vue-i18n与vue存在版本兼容性问题,vue2.x需要使用 8.9.0以下版本的vue-i18n,我们这里用的vue 2.6.10,配合vue-i18n 8.2.1版本使用
打开项目根目录在终端运行
- npm install vue-i18n@8.2.1 --save
- yarn add vue-i18n@8.2.1 --save
下完包以后在项目的src文件夹里面创建lang文件夹并配置
在index.js里面配置
在modules里面配置中文和英文
-
中文
-
英文
配置好以后在main.js里面使用
在DOM中使用 $t('此处是语言包定义的变量')
<div class="submit">
<button @click="onSubmit">{{ $t("login") }}</button>
</div>
在js中使用this.$t('xxxxxx')
this.$t("login")
需要切换语言的时候使用
this.$i18n.locale = "en"
和后端商量好要什么字段切换语言(大小写),并在request.js里面的请求头加上切换语言的字段。
const i18n = Geti18n() //此处的Geti8n 是本地存储
if (i18n) {
if (i18n === 'en') {
config.headers['Accept-Language'] = 'en_US'
} else {
config.headers['Accept-Language'] = 'zh_CN'
}
} else {
config.headers['Accept-Language'] = 'en_US'
}