Laravel开发环境下Vite的正确便捷使用方法咨询

我太懂你这种被反复执行npm run build折磨的烦躁了——开发时改个按钮颜色都要跑一遍编译，完全打断开发节奏！其实你是没get到Vite在开发阶段的核心用法，它可不是只用来生产环境压缩代码的，开发时的实时热重载才是它的杀器，完全不用手动build的。

先给你理顺正确的开发流程，保证你之后改代码爽到飞起：

• 开发时要同时启动两个服务：

  1. 打开第一个终端窗口，运行npm run dev——这是启动Vite的开发服务器，它会实时监听你的resources目录下的JS、CSS/Sass文件变化，自动编译并把更新推送到浏览器，实现热重载（甚至不用整页刷新，只更新修改了的部分）。
  2. 打开第二个终端窗口，正常运行php artisan serve启动Laravel的后端服务。

• 为什么之前单独用php artisan serve会找不到文件？
  你之前只开了Laravel的服务，没启动Vite的开发服务器，而@vite指令在开发环境下，是从Vite的dev server拉取实时编译的资源，不是读取public目录下的文件。只有当你运行npm run build后，Vite才会把编译好的产物打包到public里，这时候单独开Laravel服务才能读到，但这是生产环境的用法，开发时完全没必要。

• 关于你的vite.config.js配置
  你已经把resources/js/test.js加入input数组了，这个配置是对的，只要Vite dev server在运行，@vite(['resources/js/test.js'])就能正确加载资源，而且你改了代码后，浏览器会立刻同步变化，根本不用跑build。

• 至于你说的直接在public目录建CSS文件用asset()引入，当然可以这么做，但这就浪费了Vite在开发时的核心优势：比如SCSS/Sass的实时编译、ES6+模块的无缝支持、依赖预构建加速、组件级的热重载这些。Vite是全流程工具，开发提效、生产压缩打包都能搞定，别只把它当生产工具用。

最后给你几个开发时的小技巧：

• 要是觉得开两个终端麻烦，也可以用终端的分屏功能（大部分终端都支持），或者用npm run dev -- --host让Vite服务绑定到0.0.0.0，这样同一局域网的手机或其他设备也能访问你的开发环境，测试移动端很方便。
• 如果热重载没生效，检查下浏览器有没有开缓存，或者直接开无痕模式试试，有时候缓存会导致更新不及时。

内容来源于stack exchange