为什么我在 javascript 中读取 YAML 值时没有定义它，但它在其他任何地方？答案

【问题标题】：Why is my YAML value not defined when I read it in javascript but it is everywhere else?为什么我在 javascript 中读取 YAML 值时没有定义它，但它在其他任何地方？
【发布时间】：2019-12-09 10:46:29
【问题描述】：

我正在尝试从本地目录中读取 YAML 文件。我可以读取它，但文件中的数据没有定义。

错误如下所示：

文件中的数据结构如下：

userName: myusername

options :
   displayTime : true
   displayGreating : true

fruit: 
 -apple
 -orange

我的代码说“我的用户名”没有定义。这是什么意思？

我正在像这样加载 YAML：

<template>
  <div>
    {{this.dataNotWorkingNow}}
  </div>
</template>

<script>
import yaml from "js-yaml";
import fs from "fs";
import config from "./config.yml";
export default {
  data() {
    return {
      dataNotWorkingNow: []
    };
  },
  created() {
    fs.readFile(config, "utf8", function(e, data) {
      var file;
      if (e) {
        console.log("config.yml not found.");
      } else {
        file = yaml.safeLoad(data, "utf8");
        if (file.options["displayGreating"]) {
          console.log("hello " + file.userName);
        }
        if (file.options["displayTime"]) {
          console.log("the time is: " + new Date());
        }
      }
    });
  }
};
</script>

如何从本地文件加载数据？

【问题讨论】：

如果您将myusername 放在双引号中会怎样？
@Honza 然后我得到另一个错误，上面写着“创建的钩子中的错误：”TypeError: fs__WEBPACK_IMPORTED_MODULE_2___default.a.readFile 不是一个函数“”
那么如果你在 webpack 配置中发布如何解析 *.yml 文件将会很有帮助。并在那里搜索。您导入的 Yml 看起来像解析为 js 文件。可能需要使用一些 yml 加载器来与 webpack 一起使用，以便能够使用 import ... from 语句直接导入 yml 文件

标签： javascript vue.js yaml

【解决方案1】：

这是因为你这样做

import config from "./config.yml";

该语句尝试将您的 YAML 文件解析为 JavaScript 源。放下这条线，改用fs.readFile("./config.yml", …。

【讨论】：