自从 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”，我会得到：

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

8. 从 .gitignore 中删除这些路径：

- /public/build
- /storage/ssr

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

Answer 2

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

使用 Vite，运行

npm run dev

只会构建您的前端并开始监视代码的任何更改以自动重建。

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

php artisan serve

。

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

Answer 3

有同样的问题，但上述解决方案都不适合我。相反，我在渲染的 html 的 head 部分看到了