部署Vercel后Angular无法获取JSON数据，本地正常求助

问题原因 #

你在代码里硬编码了本地开发环境的绝对URL http://localhost:4200/assets/data/trending-movies.json。本地开发时这个地址指向你的本地服务器，所以能正常访问；但部署到Vercel后，生产环境的域名并非localhost:4200，请求这个不存在的地址自然会返回404错误。

解决方案 #

1. 替换为相对路径 #

把HTTP请求的URL改成相对路径，Angular会自动根据当前环境的域名拼接正确路径，同时适配本地开发和生产部署场景：

getTrangingMovies() {
  // 根相对路径，从项目根目录定位文件
  this.http.get("/assets/data/trending-movies.json").subscribe((movies) => {
    this.trendingMovies = movies;
    console.log("Trending Movies: ", this.trendingMovies)
  })
}

也可以用当前组件的相对路径（./assets/...），但根相对路径（/assets/...）更可靠，避免组件层级变化导致路径错误。

2. 确认文件打包配置 #

确保trending-movies.json所在的src/assets/data目录被Angular打包工具包含。检查项目根目录的angular.json文件，确认assets配置项包含src/assets：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "assets": [
            "src/favicon.ico",
            "src/assets" // 这一行必须存在，会打包assets下所有文件和子目录
          ]
        }
      }
    }
  }
}

配置正确的话，打包后的dist目录里会有assets/data/trending-movies.json，部署到Vercel后就能被正常访问。

3. 校验Vercel部署配置 #

确保Vercel使用正确的构建命令和输出目录：

• 构建命令：Angular 12+ 用ng build（默认生产模式），旧版本可使用ng build --prod
• 输出目录：通常是dist/你的项目名称，Vercel一般会自动检测，若未识别，可在项目根目录创建vercel.json文件：

{
  "buildCommand": "ng build",
  "outputDirectory": "dist/your-project-name"
}

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