【源码】Vue-i18n: 你知道国际化是怎么实现的么？开发者社区

【源码】Vue-i18n: 你知道国际化是怎么实现的么？

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>ES modules browser example</title>
    <script src="../../dist/vue-i18n.js"></script>
  </head>
    <div id="app">
      <p>{{ $t('message.hello') }}</p>
    <script type="module">
      // 如果使用模块系统 (例如通过 vue-cli)，则需要导入 Vue 和 VueI18n ，然后调用 Vue.use(VueI18n)。
      import Vue from 'https://unpkg.com/vue@2.6.10/dist/vue.esm.browser.js'
      Vue.use(VueI18n)
      new Vue({
        // 通过 `i18n` 选项创建 Vue 实例
        // 通过选项创建 VueI18n 实例
        i18n: new VueI18n({
          locale: 'zh', // 设置地区
          // 准备翻译的语言环境信息
          // 设置地区信息
          messages: {
            en: {
              message: {
                hello: 'hello, I am Gopal'
            zh: {
              message: {
                hello: '你好，我是 Gopal 一号'
      }).$mount('#app')
    </script>
  </body>
</html>

├── components/
│   ├── interpolation.js // <i18n> 组件的实现
│   └── number.js
├── directive.js // 全局自定义组件的实现
├── extend.js // 拓展方法
├── format.js // parse 和 compile 的核心实现
├── index.js // 入口文件
├── install.js // 注册方法
├── mixin.js // 处理各个生命周期
├── path.js
└── util.js

// Auto install if it is not done yet and `window` has `Vue`.
// To allow users to avoid auto-installation in some cases,
// this code should be placed here. See #290
/* istanbul ignore if */
if (!Vue && typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)

// 在 Vue 的原型中拓展方法，代码在 extend.js 里
extend(Vue)
// 在 Vue 中通过 mixin 的方式混入
Vue.mixin(mixin)
// 全局指令
Vue.directive('t', { bind, update, unbind })
// 全局组件
Vue.component(interpolationComponent.name, interpolationComponent)
Vue.component(numberComponent.name, numberComponent)

// VueI18n 其实不是一个 Vue 对象，但是它在内部建立了 Vue 对象 vm，然后很多的功能都是跟这个 vm 关联的
this._initVM({
  locale,
  fallbackLocale,
  messages,
  dateTimeFormats,
  numberFormats
_initVM (data: {
         locale: Locale,
         fallbackLocale: FallbackLocale,
         messages: LocaleMessages,
         dateTimeFormats: DateTimeFormats,
         numberFormats: NumberFormats
         }): void {
  // 用来关闭 Vue 打印消息的
  const silent = Vue.config.silent
  Vue.config.silent = true
  this._vm = new Vue({ data }) // 创建了一个 Vue 实例对象
  Vue.config.silent = silent

// 在 Vue 的原型中挂载 $t 方法，这是我们为什么能够直接在模板中使用的原因
// 把 VueI18n 对象实例的方法都注入到 Vue 实例上
Vue.prototype.$t = function (key: Path, ...values: any): TranslateResult {
  const i18n = this.$i18n
  // 代理模式的使用
  return i18n._t(key, i18n.locale, i18n._getMessages(), this, ...values)

// $t 最后调用的方法
_t (key: Path, _locale: Locale, messages: LocaleMessages, host: any, ...values: any): any {
  if (!key) { return '' }
  const parsedArgs = parseArgs(...values)
  // 如果 escapeParameterHtml 被配置为 true，那么插值参数将在转换消息之前被转义。
  if(this._escapeParameterHtml) {
    parsedArgs.params = escapeParams(parsedArgs.params)
  const locale: Locale = parsedArgs.locale || _locale
  // 翻译
  let ret: any = this._translate(
    messages, locale, this.fallbackLocale, key,
    host, 'string', parsedArgs.params

this._interpolate(step, messages[step], key, host, interpolateMode, args, [key])

this._render(ret, interpolateMode, values, key)

_render (message: string | MessageFunction, interpolateMode: string, values: any, path: string): any {
  // 自定义插值对象
  let ret = this._formatter.interpolate(message, values, path)
  // If the custom formatter refuses to work - apply the default one
  if (!ret) {
    // 默认的插值对象
    ret = defaultFormatter.interpolate(message, values, path)
  // if interpolateMode is **not** 'string' ('row'),
  // return the compiled data (e.g. ['foo', VNode, 'bar']) with formatter
  return interpolateMode === 'string' && !isString(ret) ? ret.join('') : ret

export default class BaseFormatter {
  // 实现缓存效果
  _caches: { [key: string]: Array<Token> }
  constructor () {
    this._caches = Object.create(null)
  interpolate (message: string, values: any): Array<any> {
    // 没有插值对象的话，就直接返回
    if (!values) {
      return [message]
    // 如果存在 tokens，则组装值返回
    let tokens: Array<Token> = this._caches[message]
    if (!tokens) {
      // 没有存在 tokens，则拆分 tokens
      tokens = parse(message)
      this._caches[message] = tokens
    return compile(tokens, values)

<p>{{ $t('message.sayHi', { name: 'Gopal' })}}</p>

// 代码比较直观，可以看到本质上是遍历字符串，然后遇到有 {} 包裹的，把其中的内容附上类型拿出来放入到 tokens 里返回。
export function parse (format: string): Array<Token> {
  const tokens: Array<Token> = []
  let position: number = 0
  let text: string = ''
  while (position < format.length) {
    let char: string = format[position++]
    if (char === '{') {
      if (text) {
        tokens.push({ type: 'text', value: text })
      text = ''
      let sub: string = ''
      char = format[position++]
      while (char !== undefined && char !== '}') {
        sub += char
        char = format[position++]
      const isClosed = char === '}'
      const type = RE_TOKEN_LIST_VALUE.test(sub)
        ? 'list'
        : isClosed && RE_TOKEN_NAMED_VALUE.test(sub)
          ? 'named'
          : 'unknown'
      tokens.push({ value: sub, type })
    } else if (char === '%') {
      // when found rails i18n syntax, skip text capture
      if (format[(position)] !== '{') {
        text += char
    } else {
      text += char
  text && tokens.push({ type: 'text', value: text })
  return tokens

[
        "type": "text",
        "value": "hi, I am "
        "value": "name",
        "type": "named"

// 把一切都组装起来
export function compile (tokens: Array<Token>, values: Object | Array<any>): Array<any> {
  const compiled: Array<any> = []
  let index: number = 0
  const mode: string = Array.isArray(values)
    ? 'list'
    : isObject(values)
      ? 'named'
      : 'unknown'
  if (mode === 'unknown') { return compiled }
  while (index < tokens.length) {
    const token: Token = tokens[index]
    switch (token.type) {
      case 'text':
        compiled.push(token.value)
        break
      case 'list':
        compiled.push(values[parseInt(token.value, 10)])
        break
      case 'named':
        if (mode === 'named') {
          compiled.push((values: any)[token.value])
        } else {
          if (process.env.NODE_ENV !== 'production') {
            warn(`Type of token '${token.type}' and format of value '${mode}' don't match!`)
        break
      case 'unknown':
        if (process.env.NODE_ENV !== 'production') {
          warn(`Detect 'unknown' type of token!`)
        break
    index++
  return compiled

// 如果escapeParameterHtml被配置为true，那么插值参数将在转换消息之前被转义。
if(this._escapeParameterHtml) {
  parsedArgs.params = escapeParams(parsedArgs.params)

/**
 * Sanitizes html special characters from input strings. For mitigating risk of XSS attacks.
 * @param rawText The raw input from the user that should be escaped.
function escapeHtml(rawText: string): string {
  return rawText
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&apos;')
 * Escapes html tags and special symbols from all provided params which were returned from parseArgs().params.
 * This method performs an in-place operation on the params object.
 * @param {any} params Parameters as provided from `parseArgs().params`.
 *                     May be either an array of strings or a string->any map.
 * @returns The manipulated `params` object.
export function escapeParams(params: any): any {
  if(params != null) {
    Object.keys(params).forEach(key => {
      if(typeof(params[key]) == 'string') {
        // 处理参数，防止 XSS 攻击
        params[key] = escapeHtml(params[key])
  return params

// 为了监听翻译变量的变化
watchI18nData (): Function {
  const self = this
  // 使用 vue 实例中的 $watch 方法，数据变化的时候，强制刷新
  // 组件的 data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中
  return this._vm.$watch('$data', () => {
    self._dataListeners.forEach(e => {
      Vue.nextTick(() => {
        e && e.$forceUpdate()
  }, { deep: true })

// 添加订阅器，添加使用的实例
subscribeDataChanging (vm: any): void {
  this._dataListeners.add(vm)
// 移除订阅器
unsubscribeDataChanging (vm: any): void {
  remove(this._dataListeners, vm)

// 精简后的代码  
// 在保证了_i18n 对象生成之后，beforeMount 和 beforeDestroy 里就能增加移除监听了
beforeMount (): void {
  const options: any = this.$options
  options.i18n = options.i18n || (options.__i18n ? {} : null)
  this._i18n.subscribeDataChanging(this)
  beforeDestroy (): void {
    if (!this._i18n) { return }
    const self = this
    this.$nextTick(() => {
      if (self._subscribing) {
        // 组件销毁的时候，去除这个实例
        self._i18n.unsubscribeDataChanging(self)
        delete self._subscribing

// 全局指令
Vue.directive('t', { bind, update, unbind })
// 全局组件
Vue.component(interpolationComponent.name, interpolationComponent)
Vue.component(numberComponent.name, numberComponent)

<!-- 字符串语法：字面量 -->
<p v-t="'foo.bar'"></p>
<!-- 字符串语法：通过数据或计算属性绑定 -->
<p v-t="msg"></p>
<!-- 对象语法： 字面量 -->
<p v-t="{ path: 'hi', locale: 'ja', args: { name: 'kazupon' } }"></p>
<!-- 对象语法： 通过数据或计算属性绑定 -->
<p v-t="{ path: greeting, args: { name: fullName } }"></p>
<!-- `preserve` 修饰符 -->
<p v-t.preserve="'foo.bar'"></p>

// 主要是调用了 t 方法和 tc 方法
if (choice != null) {
  el._vt = el.textContent = vm.$i18n.tc(path, choice, ...makeParams(locale, args))
} else {
  el._vt = el.textContent = vm.$i18n.t(path, ...makeParams(locale, args))

<div id="app">
  <!-- ... -->
  <i18n path="term" tag="label" for="tos">
    <a :href="url" target="_blank">{{ $t('tos') }}</a>
  </i18n>
  <!-- ... -->

export default {
  name: 'i18n',
  functional: true,
  props: {
    // 外层标签。传 false,则表示不需要外层
    tag: {
      type: [String, Boolean, Object],
      default: 'span'
    path: {
      type: String,
      required: true
    locale: {
      type: String
    places: {
      type: [Array, Object]
  render (h: Function, { data, parent, props, slots }: Object) {
    const { $i18n } = parent
    const { path, locale, places } = props
    // 通过插槽的方式实现
    const params = slots()
    // 获取到子元素 children 列表
    const children = $i18n.i(
      path,
      locale,
      onlyHasDefaultPlace(params) || places
        ? useLegacyPlaces(params.default, places)
        : params
    const tag = (!!props.tag && props.tag !== true) || props.tag === false ? props.tag : 'span'
    // 是否需要外层标签进行渲染
    return tag ? h(tag, data, children) : children

function useLegacyPlaces (children, places) {
  const params = places ? createParamsFromPlaces(places) : {}
  if (!children) { return params }
  // Filter empty text nodes
  children = children.filter(child => {
    return child.tag || child.text.trim() !== ''
  const everyPlace = children.every(vnodeHasPlaceAttribute)
  if (process.env.NODE_ENV !== 'production' && everyPlace) {
    warn('`place` attribute is deprecated in next major version. Please switch to Vue slots.')

【源码】Vue-i18n: 你知道国际化是怎么实现的么？

【源码】Vue-i18n: 你知道国际化是怎么实现的么？

Vue-i18n 简单介绍以及使用

代码结构以及入口

全局方法 $t 的实现

_interpolate

format.js 中的 parse 和 compile

Vue-i18n 是如何避免 XSS ？

如何做到无刷新更新页面

全局自定义指令以及全局组件的实现

全局指令 t

全局组件 i18n