如何在.js文件中读取.yml文件键值并插值到字符串中？

你遇到的核心问题是JS无法直接读取本地的application.yml文件，而且this.key3的写法既没有正确加载配置，上下文也不对。下面分两种常见场景给出解决方案：

场景1：Node.js后端环境 #

1. 首先安装YAML解析依赖，比如js-yaml：

npm install js-yaml

2. 在JS文件中读取并解析application.yml：

const fs = require('fs');
const yaml = require('js-yaml');

// 读取配置文件并解析为JS对象
const config = yaml.load(fs.readFileSync('./application.yml', 'utf8'));

// 直接使用config对象中的key3值进行插值
const redirect_uri = `https://${config.key3}/foo5/foo6`;

场景2：前端浏览器环境 #

浏览器无法直接读取本地文件，需要先把YAML配置转成可导入的JS模块：

1. 创建一个config.js文件，把YAML内容转成JS对象：

export const config = {
  key1: "foo1",
  key2: "foo2",
  key3: "foo3"
};

2. 在目标JS文件中导入并使用：

import { config } from './config.js';

const redirect_uri = `https://${config.key3}/foo5/foo6`;

补充说明 #

• 不要用this.key3：this的指向取决于当前执行上下文，而且你根本没把YAML配置加载到当前环境，自然无法访问这个变量。
• 如果是使用构建工具（如Webpack/Vite）的前端项目，也可以使用插件直接导入YAML文件，比如yaml-loader，配置后就能像导入JS模块一样读取YAML内容。

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