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

 更新时间:2018年06月07日 11:57:25   作者:cofecode  
这篇文章主要介绍了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就行。

中/English 切换函数

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

在js里如何拿配置过的语言来使用?

this.$t("sidebar.MyAccount")

这里我们使用了mint-ui框架中的Toast消息提示框,想让它根据语言环境来显示不同的提示语。

双语言前

Toast({message: '验证码发送成功'})

更改为双语言后

Toast({message: this.$t("home.SendCode")})

总结

以上所述是小编给大家介绍的vue 国际化 vue-i18n 双语言 语言包,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue-cli之引入Bootstrap问题(遇到的坑,以及解决办法)

    vue-cli之引入Bootstrap问题(遇到的坑,以及解决办法)

    这篇文章主要介绍了vue-cli之引入Bootstrap问题(遇到的坑,以及解决办法),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue中el-message的封装使用

    vue中el-message的封装使用

    本文主要介绍了vue中el-message的封装使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • elementUI多选框反选的实现代码

    elementUI多选框反选的实现代码

    这篇文章主要介绍了elementUI多选框反选的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 一文搞明白vue开发者vite多环境配置

    一文搞明白vue开发者vite多环境配置

    Vue是一款流行的JavaScript框架,用于开发动态单页应用程序,本地安装和环境配置是学习和使用Vue的第一步,下面这篇文章主要给大家介绍了关于vue开发者vite多环境配置的相关资料,需要的朋友可以参考下
    2023-06-06
  • 使用webstorm配置vue+element开发环境

    使用webstorm配置vue+element开发环境

    这篇文章主要介绍了使用webstorm配置vue+element开发环境,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 解决Vue在Tomcat8下部署页面不加载的问题

    解决Vue在Tomcat8下部署页面不加载的问题

    今天小编就为大家分享一篇解决Vue在Tomcat8下部署页面不加载的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue中的组件注册方法及注意事项

    Vue中的组件注册方法及注意事项

    在Vue中,组件是构建页面的基本单位。通过组件化开发,可以提高代码的复用性和可维护性。组件的注册方法包括全局注册和局部注册两种方式。同时,需要注意组件名的命名规范、组件选项的定义方式、组件之间的通信等问题,以实现更好的组件复用和开发效率
    2023-05-05
  • Vue 实现穿梭框功能的详细代码

    Vue 实现穿梭框功能的详细代码

    本文给大家介绍Vue 实现穿梭框功能,代码分为css,html和js代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2021-10-10
  • vue项目中各文件的使用说明

    vue项目中各文件的使用说明

    这篇文章主要介绍了vue项目中各文件的使用说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • Vue3实现简约型侧边栏的示例代码

    Vue3实现简约型侧边栏的示例代码

    本文主要介绍了Vue3实现简约型侧边栏的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07

最新评论