Laravel10+Breeze+InertiaJS+Vue子目录部署遇Ziggy未定义错误求助

核心错误原因 #

你在步骤4中直接移除了@routes指令，但Ziggy（Laravel前端路由助手，Breeze+Inertia默认集成）依赖这个指令注入路由配置和初始化代码，这是ReferenceError: Ziggy is not defined报错的直接原因。

具体修正步骤 #

1. 恢复@routes指令 #

不要删除resources/views/app.blade.php中的@routes指令，它负责自动生成Ziggy的路由配置（包含子目录前缀），是前端路由正常工作的必要条件。

2. 正确配置Vite子目录资源路径 #

不要手动替换@vite指令，而是通过Vite配置自动适配子目录：

• 在项目根目录的vite.config.js中添加base选项：

  export default defineConfig({
    plugins: [
      laravel({
        input: 'resources/js/app.js',
        refresh: true,
      }),
      vue({
        template: {
          transformAssetUrls: {
            base: null,
            includeAbsolute: false,
          },
        },
      }),
    ],
    base: '/my-project/', // 匹配你的子目录路径
  });
  

• 执行npm run build重新编译资源，编译后的资源路径会自动带上子目录前缀，无需手动修改app.blade.php中的资源链接。

3. 撤销对vendor文件的修改 #

步骤6中修改vendor/inertiajs/inertia-laravel/src/Response.php的操作不规范，后续Composer更新会覆盖该文件。正确做法是在项目根目录的.env文件中设置：

APP_URL=http://localhost/my-project

Laravel和Inertia会自动使用这个URL生成正确的路由与资源路径。

4. 验证Apache配置的重写规则 #

确保你的000-default.conf中的子目录配置包含正确的重写规则：

<Directory /var/www/html/my-project>
    Options Indexes FollowSymLinks MultiViews
    AllowOverride All
    Require all granted
    RewriteEngine On
    RewriteBase /my-project/
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /my-project/index.php [L]
</Directory>

配置完成后重启Apache服务：sudo systemctl restart apache2

5. 确认前端Ziggy引入正常 #

检查resources/js/app.js中是否包含以下代码（Breeze+Inertia默认模板已集成）：

import Ziggy from 'ziggy-js';
import { ZiggyVue } from 'ziggy-js';

createApp({ render: () => h(InertiaApp, { initialPage: page, resolveComponent: resolvePageComponent }) })
    .use(ZiggyVue, Ziggy) // 确保注册ZiggyVue
    .mount('#app');

最终验证流程 #

1. 重新编译前端资源：npm run build
2. 同步核心代码与public目录到服务器
3. 重启Apache服务
4. 访问http://localhost/my-project测试

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