Vercel部署后CSS、图片等静态资源无法加载（本地正常，已尝试多方案）

本地服务器（localhost）运行时，CSS、图片、JavaScript文件均可正常加载执行；但部署至Vercel后，CSS无法渲染，图片加载返回404错误，部分JavaScript文件无法正常运行。

已尝试的修复方案 #

• 修改资源路径：初始使用相对路径：

  <link rel="stylesheet" href="assets/css/main.css">
  
  <img src="assets/img/logo.png" alt="Logo">
  

  先后尝试绝对路径(/assets/css/main.css)和相对路径(./assets/css/main.css)，均仅本地生效；
• 编辑vercel.json配置，设置路由规则并添加缓存控制头，配置如下：

  {
    "rewrites": [
      {
        "source": "/(.*)", 
        "destination": "/html/digitalize/index.html"
      }
    ],
    "headers": [
      {
        "source": "/assets/(.*)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      }
    ]
  }
  

  但未解决问题；

控制台错误信息 #

样式表 https://digitalize-v-2-abanr573a-fadyfatheys-projects.vercel.app/assets/css/bootstrap.min.css 未加载，因为其MIME类型为"text/html"，不是"text/css"。

Uncaught SyntaxError: expected expression, got '<'（所有JS文件均出现该错误，例如bootstrap.bundle.min.js、jquery.js等）

加载资源失败：服务器返回404（未找到）状态（针对图片，例如https://digitalize-v-2-abanr573a-fadyfatheys-projects.vercel.app/assets/img/logo.png）

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