很多同学在做项目的时候都遇到过多语言的需求,或者说已经实践过了,这篇文章主要讲的是通过 vue-i18n 来进行 Vue 项目的多语言配置,它的功能十分丰富,在我目前为止的项目开发中都是可以满足需求的使用的,文档地址 ,文档对于一些基础的使用方法都做了详细的介绍

安装

通过 npm 安装 npm install vue-i18n ,更多安装方式请查看 Vue I18n文档-安装

引入

main.js 代码

import VueI18n from 'vue-i18n'
import LangZhCn from './assets/i18n/zh-cn' // 多语言配置文件-中文
import LangEnUs from './assets/i18n/en' // 多语言配置文件-英文

Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: tools.getLang(), // 从缓存中读取语言配置,详情请看下一个代码块
  messages: {
    'cn': LangZhCn,
    'en': LangEnUs
  }
})

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

tool.js 代码

export default {
  /**
   * @description: 在缓存中写入语言配置变量
   * @param {String} lang 语言代码,main.js 中初始化的
   */
  setLang (lang) {
    var storage = window.localStorage
    storage.setItem('vue-lang', lang)
  },
  /**
   * @description: 获取当前语言变量,若无就设置成中文并返回
   * @return: 语言变量
   */
  getLang () {
    var storage = window.localStorage
    var lang = storage.getItem('vue-lang')
    if (lang === null || lang === '') {
      this.setLang('cn')
      return 'cn'
    } else {
      if (lang === '"cn"' || lang === '"en"') {
        return JSON.parse(lang)
      } else {
        return lang
      }
    }
  }
}

多语言文件示例

// zh-cn.js 中文配置文件
export default {
  'header': {
    'index': '首页'
  }
}

// en.js 英文配置文件
export default {
  'header': {
    'index': 'Home'
  }
}

使用

使用起来很简单,

  • template 中使用 {{$t('header.index')}} v-html="$t('header.index')"
  • 在 js 中则使用 this.$t('header.index')

当我们在组件的 props 的 default 中初始化值的时候,需要采取这种写法

props: {
    notice: {
        type: String,
        default () {
            return this.$t('tip')
        }
    }
}

但是我们知道有些场景下我们会遇到这样的语句:非常感谢nickName购买了我们的产品 ,显然这句话中有一个变量,而由于不同语言的语法不一样,我们并不能直接生硬的翻译变量前后的两句,这时候就要用上格式化了。我们只需要在我们的配置文件中写

export default {
    'tip': '非常感谢{nickName}购买了我们的产品'
}

使用的时候

// template
<div>{{$t('tip', { nickName: nick })}}</div>
// js
this.$t('tip', { nickName: this.nick })

避免了我们去拼接变量可能带来的麻烦

辅助

之前开发过一段时间的安卓,安卓中也有多语言相关的配置,基本都是采用类似的方式做的多语言,但是安卓开发的编辑器 Android Studio 却有一个很强大且实用的功能,你写在文件中的多语言它会自动帮你替换为文字,当你点击这个文字的时候才会显示源码,这样是非常有助于我们的开发的,因为多语言的配置命名过长会影响代码浏览,命名过短又无法见名知意,这样我们便不用太过纠结命名(当然尽量简短的做到见名知意还是很有必要的)。

VS Code 作为一款受广大开发者欢迎的编辑器,自然已经有人开发出了类似的插件,经过对插件的调查研究(翻阅其GitHub文档,(`・ω・´)),选择了这款插件 Vue i18n Ally ,虽然没有 AS 那么到位,但基本上可以满足我的需求,下面贴一下预览效果

mark

还支持跳转到定义处

mark

结语

好啦,这就是所有的介绍了,以上是工作的基础,如果想要学习更多更洋气的技能可以去它的文档仔细阅读

标签: none

添加新评论