Laravel 10+ 默认用 Vite 因其启动快、热更新毫秒级、原生支持 ES 模块和 TypeScript，而 Mix 基于 Webpack，启动慢、配置重、对现代前端生态支持滞后。

为什么 Laravel 10+ 默认用 Vite 而不是 Mix

因为 Vite 启动快、热更新毫秒级、原生支持 ES 模块和 TypeScript，而 Mix 基于 Webpack，启动慢、配置重、对现代前端生态支持滞后。Laravel 10 是首个将 vite 作为默认构建工具的 LTS 版本，npm run dev 实际调用的是 vite 而非 webpack-dev-server。

如果你刚从 Laravel 9 升级上来，会发现 webpack.mix.js 文件没了，resources/js/app.js 开头多了 import './bootstrap';，且 public/mix-manifest.json 不再生成 —— 这些都是 Vite 接管编译的信号。

如何在 Blade 中正确引入 Vite 编译后的资源

Laravel 提供了 @vite 指令自动注入开发时的 HMR 脚本（http://localhost:5173/@vite/client）和生产环境的静态资源链接，它比手写 安全得多，能自动处理哈希、代码分割和 CSS 注入。

• @vite 必须放在 内，否则 HMR 失效；不能用在子视图（@include）中动态拼接路径
• 多个入口文件要显式列出：@vite(['resources/js/app.js', 'resources/js/pages/dashboard.js'])
• 如果用了 SSR 或 Inertia，需额外加 @viteReactRefresh（仅开发环境），否则组件更新不触发重渲染
• 生产环境运行 npm run build 后，@vite 会自动读取 public/build/manifest.json 映射真实文件名

修改 Vite 配置：比如添加别名或调整端口

所有自定义都写在项目根目录的 vite.config.js 中，而不是 Laravel Mix 那套。Laravel 官方脚手架已预置基础配置，但你很可能需要改：

• 添加 @/ 别名指向 resources/js：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  
  export default defineConfig({
      plugins: [
          laravel({
              input: ['resources/css/app.css', 'resources/js/app.js'],
              refresh: true,
          }),
      ],
      resolve: {
          alias: {
              '@': '/resources/js',
          },
      },
      server: {
          host: 'localhost',
          port: 5173,
          hmr: { overlay: false }, // 关闭浏览器错误浮层（适合 CI 或特定 UI）
      },
  });

• 注意 laravel-vite-plugin 的 input 数组决定哪些文件被监听和输出；漏掉的 JS/CSS 不会进构建流程
• Vite 不支持 Webpack 那种 mix.webpackConfig 的“补丁式”配置，所有改动必须在 vite.config.js 里显式声明

常见报错与绕过方式

Vite 和 Laravel 集成虽顺滑，但几个典型错误容易卡住：

• 504 Gateway Timeout 或 ERR_CONNECTION_REFUSED：检查 vite dev server 是否真的在运行（npm run dev），Blade 中的 @vite 不会自动启服务
• Cannot find module '@/components/Example.vue'：确认 vite.config.js 中 resolve.alias 已生效，且 VS Code 等编辑器没缓存旧路径提示
• 生产环境 JS 报 Failed to fetch dynamically imported module：说明代码分割后 chunk 路径错乱，检查是否误删了 public/build 目录下除 manifest.json 外的其他文件，或 Nginx/Apache 没配好静态文件路由
• Inertia 页面切换白屏：确认 app.js 中已执行 createInertiaApp，且 @vite 在 里，不在 底部

Vite 的构建产物结构和加载逻辑跟 Webpack 有本质差异，直接套用 Mix 经验容易踩坑 —— 尤其是资源路径、模块解析和 HMR 生命周期这几个点，得按 Vite 的方式重新理解一遍。