Vercel 部署后不渲染 CSS、图像和其他静态文件（本地工作） – 尝试了多种修复方法

Question

该项目在本地主机上完美运行，所有 CSS、图像和 JavaScript 文件都能正确加载。但是，在 Vercel 上部署项目时，CSS 无法渲染，图像无法加载并出现 404 错误，并且某些 JavaScript 文件无法正确执行。我尝试了多种方法来解决该问题，包括修改index.html中的路径和更新vercel.json配置，但似乎没有任何效果。

存储库链接：

这是我的 GitHub 存储库的链接：

https://github.com/FadyFathey/digitalize-v.2.git

部署链接：

以下是 Vercel 上最新部署的链接：

https://digitalize-v-2-abanr573a-fadyfatheys-projects.vercel.app

问题描述：

1. 本地：一切都按预期完美运行。 CSS、JavaScript、图像和所有其他静态文件正确加载和渲染。

   这是页面在本地的样子：

   

2. Vercel：

部署到 Vercel 后，CSS、图像和其他一些静态文件不会加载。我收到了一个基本的无样式版本的网页，没有任何图像。

以下是在 Vercel 上部署后页面的外观：

我尝试了几种方法来解决这个问题：

1。修改文件路径:

最初，我对 CSS、图像和 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 上都不起作用，尽管它们在本地运行得很好。

2。编辑 vercel.json:

我修改了

vercel.json

配置以正确路由静态文件（CSS、JS、图像）并将它们从 SPA 路由中排除。

但不工作

喜欢：

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

3.检查控制台错误：

控制台显示如下错误：

MIME type mismatch:

CSS 文件被用作

text/html

而不是

text/css

。

图像和其他静态资源出现 404 错误。

完整的控制台，您可以现场查看演示

The stylesheet https://digitalize-v-2-abanr573a-fadyfatheys-projects.vercel.app/assets/css/bootstrap.min.css was not loaded because its MIME type, "text/html", is not "text/css".

Uncaught SyntaxError: expected expression, got '<' (appearing for every JS file, e.g., bootstrap.bundle.min.js, jquery.js, etc.)

Failed to load resource: the server responded with a status of 404 (Not Found) for images (e.g., https://digitalize-v-2-abanr573a-fadyfatheys-projects.vercel.app/assets/img/logo.png)

我期望网站能够正确呈现，所有 CSS、图像和 JavaScript 文件都能正确加载和运行，就像在本地运行项目时一样。

Answer 1

出现

MIME type mismatch:

错误是因为 Vercel 正在根目录而不是实际的资产目录中查找资产。这会导致 Vercel 将您的 CSS 文件提供为

text/html

而不是

text/css

。

尝试使用，

{
  "version": 2,
  "routes": [
    { 
      "src": "/assets/(.*)", 
      "dest": "/html/digitalize/assets/$1",
      "headers": {
        "cache-control": "public, max-age=31536000, immutable"
      }
    },
    { 
      "src": "/(.*)", 
      "dest": "/html/digitalize/index.html" 
    }
  ],
  "cleanUrls": true,
  "trailingSlash": false
}