Добавьте yaml-загрузчик в теги i18n в проект Vue-CLI 3

Question

Используя Vue-i18n и следуя этому руководству, мне удалось добавить теги в json в мой проект, созданный vue-cli.

На этой странице приведен пример написания yaml вместо json. Но нет никакого примера с управлением Vue-Cli 3 Webpack.

Итак, я попробовал это:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('i18n')
      .resourceQuery(/blockType=i18n/)
      .use('i18n')
        .loader('@kazupon/vue-i18n-loader')
        .loader('yaml-loader')
        .end();
  }
}

Но у меня есть эта ошибка

error  in ./src/components/HelloWorld.vue?vue&type=custom&index=0&blockType=i18n

Module parse failed: Unexpected token (2:5)
You may need an appropriate loader to handle this file type.
| {
>       "en": {
|               "hello": "Hello !"
|       }

 @ ./src/components/HelloWorld.vue?vue&type=custom&index=0&blockType=i18n 1:0-233 1:249-252 1:254-484 1:254-484
 @ ./src/components/HelloWorld.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--13-2!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=ts&
 @ ./src/views/Home.vue?vue&type=script&lang=ts&
 @ ./src/views/Home.vue
 @ ./src/router.ts
 @ ./src/main.ts

Я не совсем понимаю, как работает сеть веб-пакетов, что мне не хватает?

Answer 1

Правильное использование API-интерфейса цепочки веб-пакетов для добавления предзагрузчика yaml будет

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('i18n')
      .resourceQuery(/blockType=i18n/)
      .use('i18n')
        .loader('@kazupon/vue-i18n-loader')
        .end()
      .use('yaml-loader')
        .loader('yaml-loader')
        .end();
  }
}

Я также не большой поклонник этого синтаксиса, но вы должны заставить его работать;)

- "Правки должны содержать не менее 6 символов; есть ли что-то еще, что можно улучшить в этом посте?" Нет, только удалите лишнюю точку с запятой

Answer 2

Похоже, вы используете синтаксис JSON вместо синтаксиса YAML, и поэтому вы получаете эту ошибку. например синтаксис JSON:

        "en": {
          "hello": "Hello !"
  }

Синтаксис YAML:

      en:
 hello: Hello!