Windows10下Laravel Homestead中独立Vite项目资产导入失败问题

问题背景 #

在Windows 10上运行Laravel Homestead，此前多个Laravel+Vite项目通过虚拟主机正常运行，但独立Vite项目出现main.js导入资产失败的问题。

现有配置 #

Windows hosts文件 #

192.168.10.10 mysite.local

Homestead.yaml映射配置 #

- map: mysite.local
  to: /home/vagrant/code/mysite

Vite配置文件（vite.config.js） #

import { defineConfig } from 'vite';
import dns from 'dns'
dns.setDefaultResultOrder('verbatim');

export default defineConfig({
    server: {
        hmr: {
            host: 'http://mydomain.local',
        },
        watch: {
            usePolling: true
        }
    },
}); 

报错信息 #

Firefox控制台 #

Script from “http://mysite.local/public/vite.svg” was blocked because of a disallowed MIME type (“image/svg+xml”).

Loading module from “http://mysite.local/style.css” was blocked because of a disallowed MIME type (“text/css”).

Script from “http://mysite.local/javascript.svg” was blocked because of a disallowed MIME type (“image/svg+xml”).

Network标签报错：

NS_ERROR_CORRUPTED_CONTENT

Chrome控制台 #

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "image/svg+xml". Strict MIME type checking is enforced for module scripts per HTML spec.

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "image/svg+xml". Strict MIME type checking is enforced for module scripts per HTML spec.

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.

Chrome Network标签显示资产返回200状态码，但仍报错。

补充说明：直接访问资产URL可正常打开，HMR功能正常；尝试修改base、publicDir、origin等参数无效。

解决方案 #

1. 修正Vite服务器主机配置 #

当前hmr.host配置存在两个问题：域名与实际虚拟主机不匹配、带了多余的http://协议头。修改vite.config.js如下：

import { defineConfig } from 'vite';
import dns from 'dns'
dns.setDefaultResultOrder('verbatim');

export default defineConfig({
    server: {
        host: 'mysite.local', // 绑定到正确的虚拟主机域名
        port: 5173, // 明确端口避免冲突
        hmr: {
            host: 'mysite.local', // 修正为正确域名，去掉协议头
        },
        watch: {
            usePolling: true
        }
    },
}); 

2. 配置Homestead的Nginx转发规则 #

Laravel项目自带的Nginx配置会自动处理Vite路由，但独立Vite项目需要手动配置，确保动态请求转发到Vite开发服务器：

1. 编辑站点配置文件（路径：/etc/nginx/sites-available/mysite.local）：

server {
    listen 80;
    listen [::]:80;
    server_name mysite.local;
    root /home/vagrant/code/mysite;

    index index.html index.htm;

    location / {
        try_files $uri $uri/ @vite;
    }

    location @vite {
        proxy_pass http://127.0.0.1:5173;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 确保静态资源MIME类型正确
    location ~* \.(svg|css|js|png|jpg|jpeg|gif|ico)$ {
        expires max;
        add_header Cache-Control "public, immutable";
    }
}

2. 重启Nginx生效：

sudo service nginx restart

3. 修正HTML资源导入方式 #

• 确保入口脚本正确声明为模块：

<script type="module" src="/main.js"></script>

• 样式文件通过JS导入，而非直接在HTML中引用：

// main.js
import './style.css';

4. 清除缓存并重启服务 #

• 强制清除浏览器缓存（Ctrl+Shift+R）
• 停止当前Vite服务，重新启动：

npm run dev

问题根源 #

1. Vite服务器主机配置错误，导致资源请求被Nginx误处理，返回错误的MIME类型
2. 独立Vite项目缺少Laravel自带的Nginx转发规则，动态请求未正确路由到Vite服务

内容的提问来源于stack exchange，提问作者Liam Arbel