由于 Laravel 使用 Vite 更新，我无法运行 \'npm run dev\'答案

【问题标题】：I can't run 'npm run dev' since Laravel updated with Vite由于 Laravel 使用 Vite 更新，我无法运行 \'npm run dev\'
【发布时间】：2022-08-06 00:41:47
【问题描述】：

Taylor Otwell 宣布新的 Laravel 项目现在将使用 Vite 运行，并且默认安装 Vite。我似乎无法运行开发环境\'npm run dev\'

我安装了新的 laravel 项目，安装了带有 SSR 的 Laravel JetStream，团队支持点击 \'npm install command\'。

每次我运行 npm run dev 它都会显示：

如果我打开本地链接，它会显示：

为什么我不能使用 npm 运行 dev 并编译我的文件？

这是我全新的 laravel 应用程序的 package.json

{
    \"private\": true,
    \"scripts\": {
        \"dev\": \"vite\",
        \"build\": \"vite build && vite build --ssr\"
    },
    \"devDependencies\": {
        \"@inertiajs/inertia\": \"^0.11.0\",
        \"@inertiajs/inertia-vue3\": \"^0.6.0\",
        \"@inertiajs/progress\": \"^0.2.7\",
        \"@inertiajs/server\": \"^0.1.0\",
        \"@tailwindcss/forms\": \"^0.5.2\",
        \"@tailwindcss/typography\": \"^0.5.2\",
        \"@vitejs/plugin-vue\": \"^2.3.3\",
        \"@vue/server-renderer\": \"^3.2.31\",
        \"autoprefixer\": \"^10.4.7\",
        \"axios\": \"^0.25\",
        \"laravel-vite-plugin\": \"^0.2.1\",
        \"lodash\": \"^4.17.19\",
        \"postcss\": \"^8.4.14\",
        \"tailwindcss\": \"^3.1.0\",
        \"vite\": \"^2.9.11\",
        \"vue\": \"^3.2.31\"
    }
}

如果我尝试在终端中点击 \'vite\'，我会得到：

标签： laravel compiler-errors vite

【解决方案1】：

如果您不想在新的 laravel 项目中使用 vite 但 mix ，您可以通过以下更改恢复 npm run dev 的通常行为：

安装 Laravel Mix（因为新安装它不再存在）：

npm install --save-dev laravel-mix

创建一个webpack.mix.js 文件，如果它不存在，并确保它具有以下内容：

const mix = require('laravel-mix');

/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files. 
|
*/

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
       //
]);

更新package.json：

"scripts": {
-     "dev": "vite",
-     "build": "vite build"
+     "dev": "npm run development",
+     "development": "mix",
+     "watch": "mix watch",
+     "watch-poll": "mix watch -- --watch-options-poll=1000",
+     "hot": "mix watch --hot",
+     "prod": "npm run production",
+     "production": "mix --production"
}

删除 vite 辅助函数（如果有的话）：

- import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

  createInertiaApp({
      title: (title) => `${title} - ${appName}`,
-     resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
+     resolve: (name) => require(`./Pages/${name}.vue`),
      setup({ el, app, props, plugin }) {
          return createApp({ render: () => h(app, props) })
              .use(plugin)
              .mixin({ methods: { route } })
              .mount(el);
      },
});

更新环境变量（在.env中，VITE_前缀为MIX_）：

- VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
- VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+ MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+ MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

移除 Vite 和 laravel 插件

npm remove vite laravel-vite-plugin

删除 Vite 配置文件：

rm vite.config.js

从 .gitignore 中删除这些路径：

- /public/build
- /storage/ssr

如果您已经使用 vite 创建了一些代码，则必须在刀片文件中进行更多更改，请查看 this article。但如果它是一个新项目，你就可以开始了。

【讨论】：

你保存了我的项目，谢谢@Gabesz Juhász
回滚混合的绝佳答案，但 Vite 实际上很棒，并且出于某种原因将其设为默认值。我建议您创建一个迁移分支以使您的项目与 Vite 一起使用。

【解决方案2】：

我遇到了同样的问题，我做了以下和它终于奏效了！

我做了：

将我的Laravel Project 升级为Latest (v9.19.0)。事实上，我也将我所有的软件包升级到了最新的。
删除node_modules 并使用npm install 安装依赖项
确保您正确遵循upgrade guides。
使用php artisan serve运行服务器
并使用npm run dev 运行开发服务器

如果你做得正确，它应该启动开发服务器并且你的所有 javascript 代码都应该编译。（如果成功，您将看到所需的输出。）

我在上述步骤中解决了这个问题。

【讨论】：

Op 已经创建了一个全新的 laravel 安装，因此不需要升级指南。
对我来说同样的问题。全新安装 Laravel Sail。一切都符合升级指南步骤。我只能看到一个空白页面，但源代码显示它正在工作，只是没有加载惯性组件或类似的东西。

【解决方案3】：

对于遇到问题的任何人：

使用 Vite，运行 npm run dev 只会构建您的前端并开始观察代码的任何更改以自动重建。

要真正启动您的服务器，您需要在单独的命令窗口中运行php artisan serve。

来源（见使用 Laravel部分）：https://laravel-vite.dev/guide/essentials/development.html#with-laravel

【讨论】：

【解决方案4】：

如果您使用 laragon 作为本地部署，您可以将 --host 标志设置为应用程序的虚拟主机 url，它对我有用

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案5】：

有同样的问题，但没有提到的解决方案对我有用。相反，我在呈现的 html 的头部看到了 <script> src 的问题。

screenshot of script src's buggy

在 vite.config.js 中添加了以下代码解决了问题。

server: {
    hmr: {
        host: 'localhost',
    },
}

编辑：该问题已在laravel's vite-plugin repo 中报告，并将通过this PR 修复

【讨论】：