如何在 Vue 中加载 YAML 文件？

Question

我对 Vue 和整个 Web 生态系统还比较陌生。

我一直在构建一个小型应用程序，并决定主要使用 YAML 而不是 JSON 来存储数据，以便我可以使用注释。

我尝试了这两个 YAML 解析器：

• https://github.com/nodeca/js-yaml（尝试通过NPM安装）
• https://github.com/edus44/vue-cli-plugin-yaml（尝试通过使用 访问的 Vue GUI 安装vue ui）

然而，当我运行时，两者都遇到了相同的问题vue serve：

 error  in ./assets/data.yaml

Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> #im a comment
| foo: "hello"
| bar: "world"

我相当确定这是有效的 YAML...我的 YAML 文件如下所示：

#im a comment
foo: "hello"
bar: "world"

这是我尝试导入它的方法：

import data from "./assets/data.yaml"

我尝试按照错误指向的 URL ( https://webpack.js.org/concepts#loaders ) 中的说明进行操作，但立即丢失，因为：

1. 我的项目中没有 webpack.config.js （它是通过vue-cli自动为我设置的）
2. 该格式const path = require('path');似乎不适用于 Vue 项目？

YAML 解析器和 webpack 页面都假设了很多我没有的先决知识，进一步谷歌搜索只会让我更加困惑:(

任何指示将不胜感激！

Answer 1

在摆弄vue-cli-plugin-yaml一段时间后，我放弃并尝试了@DigitalDrifter 的建议并阅读了添加新加载器。然而，仅此页面并没有大量有关如何使用API 的信息，因此我浏览了 Github 上的 vue.config.js 文件，直到我能将其中的一个拼凑起来：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('yaml')
        .test(/\.ya?ml?$/)
        .use('json-loader')
          .loader('json-loader')
          .end()
        .use('yaml-loader')
          .loader('yaml-loader')
  }
}

正如 vue.config.js 文件所示，我最终安装了yaml-loader和json-loader。

然而，这仍然不起作用。我尝试了很多年不同的 vue.config.js 配置，最终发现该文件需要位于我的 src 文件夹中，而不是我的项目的根目录中，例如project_folder/src/vue.config.js NOT project_folder/vue.config.js。

然而，这似乎与官方文档所说的相悖：

vue.config.js 是一个可选的配置文件，如果它存在于项目根目录中（位于 package.json 旁边），则 @vue/cli-service 将自动加载该文件。

它还会导致vue inspect --rule yaml返回undefined，所以我认为这不是一个真正的解决方案，而是一个解决方法，所以我不会接受这个作为答案。不确定文档是否错误，或者我的环境是否有奇怪的地方。当然不仅仅是这个项目，因为新项目也有同样的问题。

以下是的结果vue inspect。