如何在 Vue 中加载 YAML 文件？

Question

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

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

我尝试了这两个 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和整个网络生态系统还比较陌生。

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

我尝试了这两个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 2

根据json-loader ：由于 webpack >= v2.0.0，JSON 文件的导入将默认工作。

因此，只需安装和使用yaml-loader就可以了（至少它对我有用）。 你也应该像这样修改vue.config.js ：

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