js读取配置文件的核心逻辑并不复杂：浏览器端用fetch请求JSON，Node.js环境用require或fs模块读取，按场景选对方式即可。 下面我结合这两大类场景，把配置文件的读取姿势、常见坑和选型建议一次讲透，保证你能直接用到项目里。
浏览器端js读取配置文件的最佳实践
浏览器里的JavaScript没有文件系统访问权限,所以读取配置文件的唯一正规途径是HTTP请求，最常见的做法是把配置写成config.json，放到静态资源目录里，然后用fetch去拉。
为什么浏览器不能直接require
很多从Node.js转过来的同学，习惯性地在浏览器代码里写require('./config.json')，结果一定会报错，原因很简单：浏览器不认识CommonJS模块系统，而且出于安全考虑，浏览器不允许js直接读取本地文件路径，行业共识认为，浏览器环境下的配置文件本质上是“通过URL获取的数据资源”，不是传统意义上的文件。
用fetch读取config.json的实操步骤
假设你的项目是纯前端工程,目录结构如下：
project/
├── config/
│ └── config.json
└── index.html那么你在index.js里可以这样写：
async function loadConfig() {
const response = await fetch('./config/config.json');
if (!response.ok) {
throw new Error('配置文件加载失败');
}
const config = await response.json();
return config;
}
loadConfig().then(config => {
console.log(config.apiBaseUrl);
});
这段代码有几个细节值得注意：
- 路径是相对于当前页面URL的，不是相对于js文件，建议用相对路径时先确认页面层级。
- 异步是必须的，因为网络请求天生异步，不能像同步读文件那样直接拿值。
- JSON格式必须严格合法，不能有注释，不能有尾逗号。
如果你的项目是Vite或Webpack,还可以用import直接导入JSON：
import config from '../config/config.json';
这种方式在构建时会直接把JSON内容打包进js,适合配置不需要变更的场景，但一旦配置更新，就需要重新构建发布，所以不推荐用于频繁调整的运营配置。
node.js读取json配置文件的两种主流方式
Node.js环境下读写文件就自由多了，根据配置文件的用途不同，业界主要有两种方式：require静态加载和fs动态读取，这两者的区别是js读取配置文件方式对比的核心。
静态配置文件用require
如果配置文件在项目启动后不会变化,用require是最简单的：
const config = require('./config.json');
console.log(config.port);
这种方式有以下几个优点：
- 同步加载,启动时立刻拿到配置对象。
- 会被Node.js缓存，多次
require不会重复读磁盘。 - 语法简单,不需要额外处理JSON解析。
但它的短板也同样明显：缓存机制导致无法热更新，假如你修改了config.json，不重启进程的话，require出来的永远是旧值。
需要热更新时用fs.readFileSync
在运维场景中,配置经常需要在不重启服务的前提下动态刷新，这时就要用fs模块读取文件内容，再用JSON.parse解析：
const fs = require('fs');
function loadConfig(filePath) {
const raw = fs.readFileSync(filePath, 'utf-8');
return JSON.parse(raw);
}
// 每次调用都重新读文件，可以拿到最新配置
setInterval(() => {
const config = loadConfig('./config.json');
console.log('最新端口:', config.port);
}, 60000);
如果你需要监听配置文件的改动,还可以用fs.watch实现自动重载：
fs.watch('./config.json', () => {
const newConfig = loadConfig('./config.json');
// 更新全局配置对象
});
这里有一个很容易踩的坑：fs.readFileSync默认返回Buffer，如果直接传给JSON.parse会报错，务必传入'utf-8'编码参数，或者调用toString()。
国内不少项目的配置文件中含有中文字段,比如接口错误文案，用fs读取时如果发现中文乱码，十有八九是编码参数写成了'ascii'，改成'utf-8'即可。
处理js读取配置文件时的路径与安全问题
很多开发者遇到“js读取配置文件不生效”的第一反应是代码写错了，实际上相当一部分问题出在路径解析和敏感信息暴露上。
路径问题：动态定位配置文件
在Node.js项目里，不要直接写相对路径，因为process.cwd()（当前工作目录）取决于你启动命令所在的位置，而不是项目根目录，稳妥的做法是用__dirname来定位：
const path = require('path');
const configPath = path.join(__dirname, '..', 'config', 'config.json');
const config = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
这样无论你在哪个目录启动项目,都能准确找到配置文件，浏览器端的路径问题则集中在部署子目录时，建议用import.meta.url或动态判断window.location.pathname来拼接完整路径。
敏感配置不要放前端
行业内有个反复强调的底线：前端的配置文件绝不能存储密码、密钥、token这类凭据，因为只要是发送到浏览器的内容，用户打开开发者工具就能看到，像支付宝密钥、数据库密码一旦出现在config.json里，就等于直接泄露，业内专家指出，前端配置只能放非敏感信息，例如接口地址、功能开关、展示文案；真正需要保密的配置必须放在服务端环境变量里，由Node.js后端读取后按需下发。
JSON注释与严格模式
配置文件里不能写注释,这是初学者最常见的报错原因。
// config.json
{
"port": 8080 // 端口
}
用JSON.parse解析时直接抛出Unexpected token /异常，如果你实在想在配置里写注释，可以使用JSON5或YAML格式，然后用对应的解析库，行业共识认为，保持配置文件为严格JSON是最省心的选择，因为工具链支持最广泛。
不同应用场景下js读取配置文件方案对比
为了让你选型更直观,我把常见场景和推荐方案整理如下：
| 场景 | 推荐方式 | 优点 | 缺点 |
|---|---|---|---|
| 纯前端页面加载静态配置 | fetch + JSON | 简单、标准 | 无法本地直接读文件 |
| 构建工具打包时注入配置 | import JSON | 类型友好、可参与构建 | 配置变更需重新构建 |
| Node.js服务启动时读取配置 | require | 同步、缓存、性能好 | 不支持热更新 |
| Node.js需要动态刷新配置 | fs.readFileSync + JSON.parse | 每次读取最新内容 | 频繁读取有IO开销 |
| 需要监听配置文件变化 | fs.watch + 重载 | 实时生效 | 需要处理防抖和错误恢复 |
从上面表格可以看出来,没有绝对最好的方案，只有最适合当前场景的选择，如果你的项目是微前端、多环境部署，还可以考虑把配置文件拆成config.dev.json和config.prod.json，然后通过环境变量动态选择要读取的文件。
Q&A：js读取配置文件常见问题解答
为什么我的js读取配置文件时返回的是字符串而不是对象？
因为你用fetch后直接拿了response.text()，或者用fs读取后没有调用JSON.parse。本质是文本，只有经过JSON.parse转换才会变成对象，如果拿到字符串后你直接访问config.port，结果肯定是undefined。
浏览器端能不能用localStorage替代配置文件？
可以,但场景不同，localStorage适合存储用户级别的个性化设置，比如主题颜色、语言偏好，它不适合存全局业务配置，因为不同用户的localStorage相互隔离，而且无法统一更新，全局配置还是得靠请求服务端资源或构建时注入。
读取的配置文件修改了，但js拿到的还是旧值，怎么解决？
先确认你是不是用了require，它自带缓存，解决方法有三个：一是改用fs.readFileSync每次重新读取；二是用delete require.cache[require.resolve('./config.json')]清除缓存后再require；三是如果你在浏览器端，检查浏览器HTTP缓存，给请求URL加上版本号参数，比如config.json?v=2，就能强制获取最新文件。
配置文件的读取看似简单,但真正影响项目稳定性的往往是路径处理、缓存策略和敏感信息边界这些细节。只要记住“浏览器用fetch、Node.js用require或fs、敏感信息不进前端”这三条原则，你就能把配置管理得明明白白。