为何JavaScript读取YAML值显示未定义？本地YAML加载问题求助

看起来你在Vue项目里加载YAML文件时遇到了数据未定义的问题，我来帮你梳理下问题所在，然后给出可行的解决方案。

先说说你代码里的几个核心问题 #

1. 错误使用了Node.js的fs模块：fs是Node.js的服务器端模块，浏览器环境（Vue项目最终运行在浏览器里）根本不支持这个模块，这会导致潜在的报错，也是你读取数据异常的原因之一。
2. 混淆了import和fs.readFile的用法：你已经通过import config from "./config.yml"导入了YAML文件，这时候config已经是解析后的JavaScript对象了，不需要再用fs.readFile去读取它——你相当于把一个对象当成文件路径传给了fs，自然读不出正确内容。
3. 数据未绑定到Vue实例：就算你成功读取到了YAML数据，也没把它赋值给data里的dataNotWorkingNow，所以模板里根本显示不出内容。
4. YAML格式小问题：你的YAML文件里fruit列表的元素少了空格，应该是- apple而不是-apple，不然解析会出问题。

方案一：直接导入YAML文件（最推荐，简单高效） #

这种方式是Vue项目里加载本地配置文件的常规操作，只要确保项目能解析YAML格式就行。

步骤1：确保项目支持YAML解析

如果是Vue CLI创建的项目，先安装yaml-loader来处理YAML文件：

npm install yaml-loader --save-dev

然后在vue.config.js里添加配置（没有这个文件就新建一个）：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.yml$/,
          use: 'yaml-loader'
        }
      ]
    }
  }
};

步骤2：修改Vue代码

直接导入YAML文件并绑定到Vue实例的data中：

<template>
  <div>
    <p>用户名：{{ config.userName }}</p>
    <p>是否显示问候：{{ config.options.displayGreating }}</p>
    <p>水果列表：</p>
    <ul>
      <li v-for="fruit in config.fruit" :key="fruit">{{ fruit }}</li>
    </ul>
  </div>
</template>
<script>
// 直接导入YAML文件，loader会自动把它解析成JS对象
import config from "./config.yml";

export default {
  data() {
    return {
      config // 把解析后的配置对象赋值给data，方便模板使用
    };
  },
  created() {
    // 现在可以直接使用config里的所有数据
    if (this.config.options.displayGreating) {
      console.log("hello " + this.config.userName);
    }
    if (this.config.options.displayTime) {
      console.log("the time is: " + new Date());
    }
  }
};
</script>

方案二：用fetch读取静态YAML文件（适合放在public目录的场景） #

如果你想把YAML文件放在public目录下（不经过webpack打包），可以用浏览器原生的fetch来读取并解析：

步骤1：把YAML文件放到public目录

创建public/config.yml，修正格式后的内容：

userName: myusername
options :
  displayTime : true
  displayGreating : true
fruit:
  - apple
  - orange

步骤2：修改Vue代码

<template>
  <div>
    <p>用户名：{{ config.userName }}</p>
    <p>是否显示问候：{{ config.options.displayGreating }}</p>
    <ul>
      <li v-for="fruit in config.fruit" :key="fruit">{{ fruit }}</li>
    </ul>
  </div>
</template>
<script>
import yaml from "js-yaml";

export default {
  data() {
    return {
      config: {} // 初始化空对象
    };
  },
  async created() {
    try {
      // 读取public目录下的YAML文件，路径直接写"/config.yml"
      const response = await fetch("/config.yml");
      const yamlContent = await response.text();
      // 把YAML文本解析成JS对象
      this.config = yaml.safeLoad(yamlContent);

      // 执行你的业务逻辑
      if (this.config.options.displayGreating) {
        console.log("hello " + this.config.userName);
      }
      if (this.config.options.displayTime) {
        console.log("the time is: " + new Date());
      }
    } catch (err) {
      console.error("加载配置文件失败：", err);
    }
  }
};
</script>

为什么原来的代码会出现myusername未定义的错误？ #

因为你把import得到的JS对象（而不是文件路径）传给了fs.readFile，fs无法正确读取这个“路径”，导致解析出的file对象是无效的，自然访问file.userName就会提示未定义。

内容的提问来源于stack exchange，提问作者Luddeb123