Javascript 如何在Vue中加载YAML文件？

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

我一直在开发一个小应用程序，并决定使用YAML来存储数据，而不是JSON，主要是为了使用注释

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

• （试图通过NPM安装）
• （试图通过使用

  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（）的说明进行操作，但立即丢失，因为：

我的项目中没有webpack.config.js（它是通过为我自动设置的）

格式

constpath=require（'path'）在Vue项目中似乎不起作用

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

任何提示都将不胜感激！

在摆弄了一段时间后，我放弃了，并尝试继续阅读。然而，仅此页面并没有关于如何使用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文件所示，我最终安装并安装了

但是，这仍然不起作用。我使用不同的vue.config.js配置尝试了很久，最终发现该文件需要保存在我的src文件夹中，而不是项目的根目录中，例如

project\u文件夹/src/vue.config.js

而不是

project\u文件夹/vue.config.js

然而，这似乎与以下内容背道而驰：

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

它还会导致

vue-inspect--rule yaml

返回

undefined

，因此我认为这不是一个真正的解决方案，而是一个解决办法，所以我不会接受这个答案。我不确定文档是否有错，或者我的环境是否有什么奇怪的地方。当然，这不仅仅是一个新项目有同样的问题。

---

关于

vue inspect

向您的项目中添加

vue.config.js

文件并阅读相关内容。我刚刚向我的vue项目中添加了

vue cli插件yaml

，所有内容都是开箱即用的-除了我使用了

从“@/assets/data.yaml”导入数据

但这只是路径差异，因此与您可能遇到的任何错误无关getting@JaromandaX嗯，我刚刚创建了一个vue新项目，方法是执行

vue创建测试

，遵循默认步骤，然后通过

npm安装添加
vue cli插件yaml
——保存dev vue cli插件yaml

，但我仍然看到相同的错误：（@digitaldriver我关注了你的链接，但似乎认为我对加载程序API有一些了解？我甚至不知道这里使用的方法是什么（例如use（）函数做什么？）。我试图替换示例中的相关位，但结果是相同的错误。@shilly您是否可以共享

vue config inspect

的输出。您当前的项目配置包含一些样板文件，这些样板文件可能存在于

vue.config.js

文件中，也可能不存在于

vue.config.js

文件中，vue在您的项目运行时添加了这些样板文件圣克雷特德酒店