Laravel 9 + Lando 无热重载及CSS源映射缺失问题

问题描述 #

基于Laravel 9搭建项目，使用Lando进行环境管理，配置完成后站点可正常运行，PHP、CSS、JS代码更新正常，但存在两个问题：

• Vite无热重载功能，修改代码后需手动刷新页面才能生效
• 控制台提示http://localhost:3009/resources/css/app.css.map对应的CSS源映射文件缺失

初始配置文件 #

vite.config.js #

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    server: {
        https: false,
        host: true,
        port: 3009,
        hmr: {host: 'localhost', protocol: 'ws'},
    },
});

.lando.yml #

name: warene
recipe: laravel
config:
  webroot: ./public
  php: '8.1'
  xdebug: true
services:
  node:
    type: node:16
    scanner: false
    ports:
      - 3009:3009
    build:
      - npm install
tooling:
  dev:
    service: node
    cmd: npm run dev
  build:
    service: node
    cmd: npm run build

解决方案 #

1. 修复热重载问题 #

修改vite.config.js，在server配置块中添加两项关键配置：

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    server: {
        https: false,
        host: true,
        strictPort: true, // 确保严格使用指定端口，避免冲突
        port: 3009,
        hmr: {host: 'localhost', protocol: 'ws'},
        watch: {
            usePolling: true, // 启用文件轮询，适配容器环境的文件监听
        }
    },
});

• strictPort: true：强制Vite使用配置的3009端口，防止端口自动切换导致热重载连接失败
• watch.usePolling: true：由于Lando的容器环境无法直接监听本地文件系统变更，启用轮询模式后Vite才能检测到代码修改并触发热重载

2. 修复CSS源映射缺失问题 #

针对app.css.map缺失的提示，可按以下步骤处理：

• 确认resources/css/app.css文件存在且路径无误
• 重新执行npm run dev，Vite会自动生成对应的源映射文件
• 若问题仍存在，可在Vite配置中显式启用CSS源映射：

export default defineConfig({
    // 其他已有配置...
    css: {
        devSourcemap: true // 强制开启开发环境CSS源映射
    }
});

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