Vercel 部署 Laravel、Inertia、Vite、Vue 时解决 \

2024-03-28 07:38:46

在 Vercel 部署 Laravel、Inertia、Vite、Vue 应用时解决 "ziggy JavaScript 文件未找到" 错误

简介

部署 Laravel、Inertia、Vite 和 Vue 应用时，你可能会遇到 "Could not load /vercel/path0/vendor/tightenco/ziggy/dist/vue.es.js" 错误。本文将详细阐述此错误的成因，并提供分步解决方案，助你轻松解决问题。

错误原因

此错误通常表明 Vercel 无法找到 ziggy JavaScript 文件。ziggy 是一个 Vue.js 路由和 URL 生成库。为了在 Vercel 上顺利部署，需要正确配置和安装 ziggy。

解决方案

步骤 1：配置 Vite.config.js 文件

在 vite.config.js 文件中添加 ziggy 别名配置，如下所示：

resolve: {
    alias: {
        ziggy: path.resolve(__dirname, "vendor/tightenco/ziggy/dist/vue.es.js"),
    },
},

步骤 2：安装 ziggy 库

使用 npm 安装 ziggy 库：

npm install @tightenco/ziggy --save

步骤 3：添加 ziggy 插件

在 Vite 配置文件的 plugins 部分，添加 ziggy 插件：

plugins: [
    ... // 其他插件
    ZiggyVuePlugin({
        // ziggy 配置选项
    }),
],

步骤 4：清除 Vercel 缓存

清除 Vercel 缓存以强制重新构建应用：

vercel clean

步骤 5：重新部署应用

重新部署应用以验证更改是否生效：

vercel deploy

其他提示

确保使用的是 Vite 2.9.x 或更高版本，它包含了 Ziggy Vue 插件的最新版本。
如果问题仍然存在，请检查 Vercel 日志以获取更详细的错误消息。
你还可以尝试将 ziggy 文件从 /vendor/tightenco/ziggy/dist/vue.es.js 复制到 /public/vendor/tightenco/ziggy/dist/vue.es.js。

常见问题解答