vue国际化vue-i18n双语言语言包_您的应用程序可能尝试使用一个vue-i18n不支持的语言环境。资源-CSDN文库

81 浏览量 2020-08-27 09:36:59 上传评论收藏 44KB PDF 举报

资源推荐

资源详情

资源评论

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

主要介绍了vue 国际化 vue-i18n 双语言语言包的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可

以参考下

1.安装vue-i18n

2.在main.js里面引用

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

3.实例化i18n，并配置默认的语言模式，以及对应的文件（也是在main.js里使用）

如下。cn 中文包对应的是cn.js

en 对应的是英文 en.js 包

const i18n = new VueI18n({

//定义默认语言

locale: 'cn',

messages:{

'cn': require('./common/lang/cn'),

'en': require('./common/lang/en')

}

})

4.cn.js 怎么写？

module.exports = {

placeholder: {

phone: '手机号',

input_code: '输入验证码',

passwordSix: '请输入6到18位密码'

},

sidebar: {

MyAccount: '账户信息',

PersonalInformation: '个人信息',

Message: '我的消息',

MyWallet: '我的钱包',

MyProject: '我的方案'

},

home: {

SendCode: 'Send verification code success'

}

}

当然 en.js 也需要配置一份

module.exports = {

placeholder: {

phone: 'Phone Number',

input_code: 'Verification code',

passwordSix: 'Please enter 6 to 18 Bit passwords'

},

sidebar: {

MyAccount: 'My Account',

PersonalInformation: 'Personal Information',

Message: 'Message',

MyWallet: 'My Wallet',

MyProject: 'My Project'

},

home: {

SendCode: 'send Code Success功'

}

}

5.如何在template中使用？

需要这样渲染出来

{{ $t("sidebar.MyWallet") }}

<li>{{ $t("sidebar.MyWallet") }}</li>

当然placeholder也是可以通过他来更改的。

<input type="text" v-model="phoneNumber" :placeholder="$t('placeholder.phone')"> 对应好配置好的placeholder就行。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

weixin_38528459

粉丝: 4
资源: 974

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip