Vue项目搭配json-server在Vercel部署失败，如何实现模拟后端接口调用

1. 最初Vercel同时启动json-server和构建超时的问题 #

• Vercel的构建阶段是临时运行环境，构建完成后整个环境会被销毁，就算你能让json-server不阻塞构建流程，构建结束后json-server服务也会消失，部署到Vercel CDN的静态前端页面根本无法访问到这个临时服务，这个方案从底层逻辑上就不可行。
• 你使用concurrently导致超时的原因：json-server带--watch参数启动后是常驻进程，concurrently默认会等待所有子进程退出才会结束执行，npm run build执行完成退出后，json-server进程还在持续运行，因此构建流程永远不会触发结束标识，最终被Vercel判定超时终止。

2. 在Vue main.ts中启动json-server的方案可行性与报错说明 #

• 这个方案完全不可行，不需要尝试修复报错：Vue的代码最终会被打包为静态JS文件，运行在用户侧的浏览器环境中，而json-server是基于Node.js和Express的后端服务，依赖Node核心API（文件读写、网络服务等），这些API在浏览器环境中完全不存在，就算你修复了当前的express依赖警告，后续也会触发大量核心模块缺失的报错，根本无法正常运行。
• 你遇到的Critical dependency: the request of a dependency is an expression报错，是webpack打包时检测到express内部用了动态依赖引入，浏览器环境下无法解析这类动态引入的依赖，属于环境不匹配的典型报错，没有修复的必要。

3. 最终方案合理性说明 #

你选择将json-server单独部署到Heroku，用Heroku的服务地址作为模拟后端接口的方案是合理的，这是前后端并行开发时模拟后端接口的标准实践。后续可以通过环境变量配置不同阶段的接口地址：开发环境用本地json-server，测试阶段用Heroku的模拟接口，正式API开发完成后直接切换环境变量中的接口地址即可，不需要修改业务代码。

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