深入浅出 vue-loader 自定义块

假期最后一天，我们来卷一下 SFC 中 customBlocks 的使用及其工作原理。

本文大纲：

• 通过 vue-i18n 的 <i18n> 了解 customBlocks 和基本配置；
• 从源码层面了解 vue-loader 对 customBlocks 的处理

vue-i18n

vue-i18n[1] 是 Vue 的国际化插件。如果使用 SFC 的方式写组件的话，可以在 .vue 文件中定义 <i18n> 块 ，然后在块内写入对应的词条。这个 i18n 标签就是 customBlocks。举个例子：

代码语言：javascript复制

<template>
  <p>{{ $t('hello') }}</p>
</template>

<script>
// App.vue
export default {
  name: 'App'
}
</script>

<i18n locale="en">
{
  "hello": "hello, world!!!!"
}
</i18n>

<i18n locale="ja">
{
  "hello": "こんにちは、世界！"
}
</i18n>

代码语言：javascript复制

// main.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import App from './App.vue'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'ja',
  messages: {}
})

new Vue({
  i18n,
  el: '#app',
  render: h => h(App)
})

上述代码定义了日文和英文两种语法，只要改变 locale 的值，就能达到切换语言的效果。除了上述用法，还支持支持引入 yaml 或者 json 等文件：

代码语言：javascript复制

<i18n src="./locales.json"></i18n>

代码语言：javascript复制

// locales.json
{
  "en": {
    "hello": "hello world"
  },
  "ja": {
    "hello": "こんにちは、世界"
  }
}

<i18n> 其他用法可以查阅使用文档[2]；

要让 customBlock 起作用，需要指定 customBlock 的 loader，如果没有指定，对应的块会默默被忽略。