Laravel/Inertia/Breeze/Vue生产环境点击链接需二次加载JS问题求助

核心问题定位 #

你遇到的生产环境首次点击链接404、Firefox MIME类型拦截问题，大概率和Vite生产构建的静态资源路径、服务器配置、Inertia路由懒加载逻辑相关，且与Breeze带来的Vite预设配置差异直接有关。

可能的原因 #

1. Vite构建的Chunk路径不匹配：生产环境Vite会给静态资源添加哈希后缀，若base配置错误或服务器未正确映射资源路径，首次请求Chunk时会返回404；二次点击时浏览器可能缓存了正确的资源引用，从而加载正常。
2. 服务器MIME类型配置错误：Firefox拦截Chunk是因为服务器未正确设置.js文件的Content-Type: application/javascript头，反而返回了text/html（通常是404页面的类型），导致浏览器认为资源类型不安全。
3. Breeze的Vite预设差异：带Breeze的应用默认启用了更细粒度的代码分片和预加载逻辑，若服务器或路由配置未适配这种逻辑，就会出现加载时序问题；而无Breeze的应用分片逻辑更简单，因此没有问题。

解决步骤 #

• 修正Vite的Base路径配置
  在vite.config.js中确保base配置适配生产环境的部署路径：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  import vue from '@vitejs/plugin-vue';
  
  export default defineConfig({
    plugins: [
      laravel({
        input: ['resources/css/app.css', 'resources/js/app.js'],
        refresh: true,
      }),
      vue({
        template: {
          transformAssetUrls: {
            base: null,
            includeAbsolute: false,
          },
        },
      }),
    ],
    // 生产环境如果部署在子目录，替换为实际路径
    base: process.env.NODE_ENV === 'production' ? '/' : '/',
  });
  

  同时检查Laravel的config/app.php中asset_url是否指向生产环境的静态资源域名/路径。

• 调整服务器静态资源配置
  以Nginx为例，确保public/build目录的资源能被正确解析：

  server {
      # 其他配置...
  
      location /build {
          alias /path/to/your/project/public/build;
          expires 1y;
          add_header Cache-Control "public, immutable";
          add_header Content-Type application/javascript;
          try_files $uri $uri/ =404;
      }
  
      # 确保主入口的重写规则正确
      location / {
          try_files $uri $uri/ /index.php?$query_string;
      }
  }
  

  Apache用户需确认public/.htaccess中的重写规则包含build目录的放行逻辑，且服务器已启用mod_rewrite。

• 规范Inertia路由懒加载写法
  确保页面组件的懒加载使用标准动态import，避免手动拼接Chunk路径：

  // resources/js/routes.js 或对应的路由文件
  export default {
    '/your-page': {
      resolve: () => import('./Pages/YourPage.vue'),
    },
    // 其他路由...
  };
  

  同时验证Laravel路由中Inertia::render的调用是否正确，没有拼写错误或路径错误。

• 彻底清理缓存并重新构建
  执行以下命令清除所有缓存后重新构建生产资源：

  # 清理Laravel缓存
  php artisan cache:clear
  php artisan config:clear
  php artisan route:clear
  
  # 清理npm依赖与缓存
  npm cache clean --force
  rm -rf node_modules package-lock.json
  npm install
  npm run build
  

• 对比并调整Vite配置差异
  对比有问题（带Breeze）和无问题（无Breeze）应用的vite.config.js与package.json，重点查看：

  • @vitejs/plugin-vue、laravel-vite-plugin的版本差异
  • 是否启用了额外的代码分片配置（如build.rollupOptions.output.splitChunks）
    尝试在有问题的应用中逐步对齐无问题应用的配置，每次调整后执行npm run build验证是否解决问题，避免一次性修改导致构建失败。

内容的提问来源于stack exchange，提问作者Jorge Dev Guzman