如何在 Vue 中加载 YAML 文件？

Question

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

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

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

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

但是，当我运行 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's advice 并阅读Adding a New Loader。然而，仅此页面并没有大量关于如何使用 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 不是 project_folder/vue.config.js.

但这似乎与official docs say 的内容背道而驰：

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

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

Here are the results 的vue inspect。