Windows局域网访问Vite预览页面时模块脚本加载失败

看起来你碰到了一个挺闹心的差异问题——Windows机器通过局域网访问Vite预览页面时，JS和CSS都加载不出来，还报MIME类型错误，但Linux、安卓、iOS却一切正常。这种跨平台的网络问题确实容易让人摸不着头脑，咱们结合你给出的配置和错误信息来一步步排查。

首先，先拆解一下核心错误：

Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/html".

这个错误的本质是：浏览器请求main.js时，服务器返回的不是JavaScript文件，而是HTML页面（大概率是404页面或者首页本身），所以MIME类型不匹配，导致浏览器无法正确解析。这通常意味着资源的请求路径出了问题，或者服务器找不到对应的资源文件。

接下来看看你的配置里可能存在的问题，以及对应的解决办法：

1. 检查base配置的路径问题 #

你在vite.config.js里设置了base: './'，这是相对路径配置。在Vite预览构建后的产物时，相对路径在不同系统的网络环境下可能会有解析差异——尤其是Windows的浏览器在处理局域网地址的相对路径时，偶尔会出现路径拼接错误，导致请求main.js时拿到的是HTML页面。

解决办法：
把base改成绝对路径'/'，因为Vite Preview是一个HTTP服务器，用绝对路径会更稳定，不受访问地址的影响。修改后的配置：

export default {
  root: "./src/",
  publicDir: "../public/",
  build: {
    outDir: "../dist/",
    emptyOutDir: true,
    reportCompressedSize: true,
  },
  server: {
    port: 3000,
    host: true,
    open: false,
  },
  worker: { format: 'es' },
  base: '/', // 改为绝对路径
};

修改后重新执行vite build，再启动vite preview，用Windows机器访问试试。

2. 确认构建后的资源目录结构 #

有时候打包后的资源路径不对，也会导致服务器找不到文件。你的Vite配置里：

• root: "./src/"：把src作为项目根目录
• build.outDir: "../dist/"：构建产物输出到上级目录的dist

检查点：
打开dist目录，确认index.html和打包后的main.js、style.css是否在同一级目录下。如果JS/CSS文件不在dist根目录，那说明打包路径有问题，需要调整build相关配置，确保资源输出位置正确。

3. 排查Windows本地网络或浏览器限制 #

如果上面的配置修改后还是不行，可能是Windows的系统设置在搞鬼：

• 防火墙/安全软件：Windows Defender防火墙可能默认阻止了Vite Preview的3000端口对外提供资源。可以临时关闭防火墙试试，或者在防火墙里添加允许Vite Preview通过的规则。
• 浏览器缓存或安全设置：Windows上的浏览器（比如Chrome）可能缓存了错误的资源，或者有严格的跨域/本地文件限制。试试清除浏览器缓存，或者用隐私模式访问。
• 本地访问测试：先在Windows机器上用http://127.0.0.1:3000访问本地的Vite Preview，如果本地正常但局域网访问不行，那基本可以确定是网络层面的限制。

4. 调整HTML里的资源引用路径 #

如果相对路径始终有问题，直接把index.html里的资源引用改成绝对路径：

<link rel="stylesheet" href="/style.css" />
<script type="module" src="/main.js"></script>

配合base: '/'的配置，这样不管从哪个局域网地址访问，浏览器都会直接请求服务器根目录下的资源，避免路径解析错误。

你可以先试试第一个办法（修改base为'/'），这是最常见的解决这类问题的方案。如果还是不行，再一步步排查其他点。

内容来源于stack exchange