laravel 9 + lando =无肝脏负荷，无源映射

Question

我刚刚创建了一个新的Laravel 9项目，我使用的是lando。

我遵循了以下指示:https://sinnbeck.dev/posts/getting-vite-and-laravel-to-work-with-lando

目前，该网站正在工作，我可以更新php, css或js代码。

但是，没有肝脏加载，我有一个错误在我的控制台关于一个缺失的源映射的css在http://localhost:3009/resources/css/app.css.map

有一个项目链接:https://github.com/CrunchyArtie/warene-next

这是我的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'},
},
});

and my.lando.ymlfile:

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

编辑:

有了这个vite.config.js，肝脏加载工作:

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,
}
},
});

Answer 1

• 使用css.devSourcemap: true生成并使用源地图文件
• 使用server.watch.usePolling: truevite将检测在lando环境中更改的文件。

This is my is myvite.config.jsfile:

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