MIME 类型错误。 JS 文件像 html 一样渲染

Question

我有一个不久前创建的网站。最近，我在本地构建了一个语言切换功能，并通过 GitHub 将其推送到 Vercel，希望它能正常工作。

页面应该如下所示：

相反，我得到了这个结果：

现在，当您查看代码时，这个结果很能说明问题。在这里，让我向您发送与此页面直接相关的代码：

<!-- index.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Contact</title>
        <meta name="description" content="Do you want your child to grow up knowing what really matters? If so, we will gladly teach them!">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://cdn.tailwindcss.com"></script>
        <script type="module" src="/languageSwitch.js"></script>
        <script src="/indexComponent.js"></script>
        <link rel="icon" href="/logo.svg">
    </head>
    <body class=" bg-slate-200">
        <index-content></index-content>
        <img id="close" src="/close.svg" class="h-5 fixed top-14 right-5 -mr-2 mt-1 border border-red border-solid bg-slate-300 rounded-xl z-10 hover:bg-slate-400">
        <div id="btnsDiv" class="fixed right-2 top-14 bg-slate-800 pt-7 pb-4 pl-3 pr-5 rounded-sm grid gap-2 sm:flex">
            <button id="Spanish" class="text-sm bg-slate-300 px-2 py-1 mx-1 rounded-xl hover:bg-slate-400 text-slate-950">Español</button>
            <button id="English" class="text-sm bg-slate-300 px-2 py-1 rounded-xl hover:bg-slate-400 text-slate-950">English</button>
        </div>
    </body>
</html>

//indexComponent.js
class IndexContent extends HTMLElement {
  connectedCallback() {
      this.updateContent();  // Initialize with default content
  }

  updateContent(content = {}) {
      const { header = {}, main = {} } = content;

      const htmlContent = `
      <header class="shadow-md shadow-slate-700 w-screen py-2 bg-slate-800 flex justify-center items-center content-center">
        <nav class="w-fit flex justify-around items-center content-center">
          <p class="hover:bg-slate-700 px-2 py-1 rounded-sm text-slate-400 border-r border-solid border-slate-300/50"><a href="/good-news/gospel.html${window.location.search}">${header.linkOne || 'Good News'}</a></p>
          <p class="hover:bg-slate-700 px-2 py-1 rounded-sm text-slate-400 border-l border-solid border-slate-300/50"><a href="/index.html${window.location.search}">${header.linkTwo || 'Sign Up'}</a></p>
        </nav>
      </header>
      <main class="w-screen m-0 py-6 flex items-center justify-center">
        <div class="w-9/12">
          <h1 class="text-center font-bold h-5 text-2xl text-slate-900 py-2">${main.title || 'Contact Us'}</h1>
          <form action="https://getform.io/f/bejyndga" method="POST" class="grid justify-center p-8 gap-4">
            <div class="grid justify-center items-center content-center">
              <input class="mb-4 px-2 rounded-sm bg-slate-100 sm:w-60 md:w-80 w-52 text-sm py-1" type="text" name="Parent_Name" placeholder="${main.fields?.parentName || 'Parent Name'}">
              <input class="mb-4 px-2 rounded-sm bg-slate-100 w-52 sm:w-60 md:w-80  text-sm py-1" type="text" name="Child's Name'" placeholder="${main.fields?.childName || 'Child/Children\'s First Name(s)'}">
              <p class="text-xs pb-4 -mt-3 text-slate-900 w-52 sm:w-60 md:w-80">${main.fields?.fieldComment?.comment || '(if you have more than one child, separate their names with commas.)'}</p>
              <input class="mb-4 px-2 rounded-sm bg-slate-100  text-sm py-1" type="number" name="Phone_Number" placeholder="${main.fields?.phoneNumber || 'Phone Number'}">
              <input class="px-2 rounded-sm bg-slate-100  text-sm py-1" type="text" name="Address" placeholder="${main.fields?.address || 'Address'}">
            </div>
            <textarea class="px-2 rounded-sm bg-slate-100  text-sm py-1" name="Additional_Info" placeholder="${main.fields?.additInfo || 'If you need to give us additional information, feel free!'}" rows="6" cols="20"></textarea>
            <button type="submit" class="bg-slate-900 py-2 text-slate-50 rounded-3xl hover:bg-slate-800 active:bg-slate-950">${main.button || 'Send'}</button>
          </form>
          <p class="text-center py-4 -mt-8 italic text-sm">${main.alt || '(Or text us at (210) 549-6522)'}</p>
        </div>
      </main>
      `;
      this.innerHTML = htmlContent;
  }
}

customElements.define("index-content", IndexContent);

如果您检查代码，您将看到只有直接位于 index.html 文件内的 html 正在渲染。虽然 Web 组件以及插值数据未显示。

我遇到三个错误：

详情：

您可以在 GitHub 上查看代码：https://github.com/QualityWebDev/Sunday_School

提前谢谢您！

Answer 1

我的问题确实得到了有效的答案。我在 Vercel 社区得到了它。我会将其发布在这里，以便它可以对 SO 上的其他人有所帮助。

深入研究 vercel.json 文件，看起来这就是问题所在。虽然此配置可能在某种程度上有效，但我们可以根据您的项目结构和 Vercel 的最佳实践进行一些问题和潜在的改进。

构建部分过于具体。您不需要列出每个文件。 Vercel 可以自动处理静态文件。文件路径不一致，有些路径以斜杠开头，有些路径则不然。这种不一致可能会导致意外的行为。路线部分比必要的更复杂指定配置版本是一个很好的做法。最后两条路由规则可能会发生冲突，从而可能导致所有请求都转到index.html。我们可以通过以下方式简化您的配置：

{
  "version": 2,
  "builds": [
    { "src": "**", "use": "@vercel/static" }
  ],
  "routes": [
    { "src": "/good-news", "dest": "/good-news/gospel.html" },
    { "handle": "filesystem" }
  ]
}

这个：

指定配置模式的版本 2。对所有静态文件使用单个构建步骤。将 /good-news 路由到 /good-news/gospel.html。使用 "handle": "filesystem" 指令按原样服务来自文件系统的所有其他请求。此配置假设：

您的主index.html位于根目录中。您希望/good-news 提供good-news 文件夹中的gospel.html。所有其他文件（CSS、图像等）应从其实际位置提供。如果您需要除此之外的任何特定路由，您可以在“handle”：“filesystem”行之前添加更多路由规则。

MIME 类型错误。 JS 文件像 html 一样渲染

问题描述投票：0回答：1

1个回答

最新问题

MIME 类型错误。 JS 文件像 html 一样渲染

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1