自从Laravel更新为Vite后，我无法运行'npm run dev'。

Question

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

我安装了新的Laravel项目，使用SSR和团队支持安装了Laravel JetStream，执行了'npm install'命令。

每次我运行npm run dev时都会显示这个：

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

为什么我不能使用npm run 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'，我会得到以下结果：

- Mostafa Said

Answer 1

如果你不想在新的 Laravel 项目中使用 vite 而是想使用 mix ，那么只需要进行如下更改就可以获得与 npm run dev 相同的行为：

1. 安装 Laravel Mix（因为它在新的安装中不再存在）：

npm install --save-dev laravel-mix

2. 如果还没有，创建一个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', [
       //
]);

3. 更新 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"
}

4. 删除 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);
      },
});

5. 更新环境变量（在 .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}"

6. 移除 Vite 和 Laravel 插件

npm remove vite laravel-vite-plugin

7. 删除Vite配置文件：

rm vite.config.js

从 .gitignore 中删除这些路径：

- /public/build
- /storage/ssr

如果您已经使用vite创建了一些代码，那么您在Blade文件中可能需要进行更多的更改，请查看这篇文章。但如果这是一个新项目，那么您就可以直接开始了。

- Gabesz Juhász

---

你救了我的项目，谢谢 @Gabesz Juhász - Gabriel Rogath

回滚到混合代码这个建议很好，但实际上 Vite 很棒而且成为默认选项也有其原因。我推荐你创建一个迁移分支，使你的项目能够与 Vite 正常工作。 - nJGL

如果我使用Reactjs而不是Vue，我能做同样的事情吗？ - Leonard203

当然可以，但我还没有尝试过。 - Gabesz Juhász

好的，在花费了数小时尝试让我全新的Laravel项目运行起来之后，我尝试了这个方法。现在，当我尝试运行npm run dev时，不再出现"sh: 1: vite: not found"的错误，而是出现了"sh: 1: mix: not found"的错误。为什么Laravel不能直接开箱即用呢？ - undefined

Answer 2

对于遇到此问题的任何人：

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

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

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

- Erick Kristofer Umali

Answer 3

我遇到了同样的问题，但是提到的解决方法都没能生效。相反，在渲染的html头部的 <script> src 标签中，我发现了一个问题。

script src 标签有问题的截图

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

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

编辑： 该问题已在laravel的vite-plugin库中报告，并将通过此PR进行修复。

- Sven

Answer 4

我曾经遇到同样的问题，按以下步骤操作后终于解决了！

我所做的是：

• 将我的 Laravel 项目 升级至最新版本 (v9.19.0)，并且升级了所有相关的包。
• 删除 node_modules 文件夹，并用 npm install 安装依赖。
• 确保你正确地遵循了升级指南。
• 使用 php artisan serve 命令启动服务器。
• 运行开发服务器，使用 npm run dev 命令。

如果你按照以上步骤进行，就能成功启动开发服务器，并编译所有 Javascript 代码。如果一切顺利，你会看到期望的输出结果。

我通过以上步骤解决了这个问题。

- Anbuselvan Rocky

---

Op已经创建了一个全新的Laravel安装，因此不需要升级指南。 - Morten Bak

我也遇到了同样的问题。我使用全新安装的 Laravel Sail，按照升级指南的步骤进行操作。我只能看到一个空白页面，但源代码显示它正在工作，只是惯性组件没有加载或类似的问题。 - Arek TG

Answer 5

尝试：

.env :

APP_URL=http://localhost:8000

welcome.blade.php :

<head>

<title>my project</title>

@vite(['/resources/js/app.js', '/resources/css/app.css'])

- MemoryGuy

Answer 6

如果您正在使用Laragon作为本地部署工具，您可以将--host标志设置为应用程序的虚拟主机URL，这对我很有效。

- Tahir Ismail

---

你的回答可以通过提供更多支持性信息来改进。请编辑以添加更多细节，例如引用或文档，以便他人确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

Answer 7

Vite需要更新的node版本。

您可以下载最新的node版本，然后运行npm install和npm run dev

要创建服务器，您可以使用php artisan serve

- Malus Jan

---

在https://vitejs.dev/guide/#scaffolding-your-first-vite-project页面上写着：“Vite需要Node.js版本14.18+，16+…”。 - bcag2