如何解决 Vite 中的“MIME 类型不匹配”错误？

在 Vite 中修复“MIME 类型不匹配”错误

简介

将 Vue SPA 从 Vue CLI 迁移到 Vite 后，你可能遇到一个烦人的错误：“加载来自 'https://mywebsite.org/subPath/assets/index-Dq7hsn19.js' 的模块被阻止 [...] MIME 类型（'text/html'）”。这表明浏览器将 JavaScript 文件识别为 HTML，导致 MIME 类型不匹配。本指南将详细介绍解决此错误的步骤。

了解错误

要解决此错误，首先要理解其原因。浏览器期望 JavaScript 文件具有“application/javascript”的 MIME 类型，但收到的文件却具有“text/html”类型。这意味着服务器将文件错误地发送给了浏览器。

修复方法

1. 检查 Vite 配置

检查 Vite 配置中的 build.rollupOptions.output.chunkFileNames 选项。它应该设置为 'assets/[name]-[hash].js' 或类似格式，以确保输出的块文件具有正确的扩展名。

2. 添加 MIME 类型

向服务器添加 MIME 类型，以正确解析 JavaScript 文件。在 Nginx 中，在配置文件中添加：

location / {
  add_header Content-Type application/javascript;
}

在 Apache 中，添加：

AddType application/javascript .js

3. 检查路由

确保 Vue-router 路由配置正确，并已将 /expPerma/:id 路由映射到正确的组件。

4. 部署并测试

完成这些步骤后，部署应用程序并测试链接。错误应已解决。

结论

通过遵循这些步骤，你可以解决 Vite 中的 MIME 类型不匹配错误，并确保你的应用程序按预期运行。

常见问题解答

1. 为什么会出现此错误？
   当服务器错误地将 JavaScript 文件发送为 HTML 时，就会出现此错误。

2. 如何检查 chunkFileNames 选项？
   在你的 vite.config.js 文件中，找到 build 对象，然后检查 rollupOptions.output.chunkFileNames 选项。

3. 如何添加 MIME 类型？
   对于 Nginx，在配置文件中添加 add_header 指令。对于 Apache，使用 AddType 指令。

4. 为什么需要检查路由？
   错误的路由配置会导致浏览器无法加载正确的组件，从而导致 MIME 类型不匹配。

5. 错误已解决，但我仍然遇到问题怎么办？
   如果错误仍然存在，请检查你的 Vite 配置、路由和服务器设置是否正确。