Npm run dev 卡在 APP_URL

Question

我创建了一个新的laravel项目，安装了breeze auth并运行了npm install和npm run dev。但现在已经卡在这个屏幕上 15 分钟了。终端窗口上没有任何东西移动。

我使用的所有命令是

laravel new shop
composer require laravel/breeze
php artisan breeze:install
npm install
npm run dev

一切工作正常，直到 npm run dev，但是当我输入 npm run dev 命令时，我得到这个输出，而没有其他输出。

PS C:\shop> npm run dev

> dev
> vite

  vite v2.9.13 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 364ms.


  Laravel v9.19.0

  > APP_URL: http://shop.test

Answer 1

我使用 npm run build 而不是 npm run dev。我想这解决了问题。

Answer 2

Laravel 9.19.0 版本将 Mixer 替换为 Vite，更多信息请查看捆绑资源（Vite）

如果你想使用 Mixer，请安装 Laravel 版本 /= 9.1.0

composer create-project Laravel/Laravel app_name 9.1.0

Answer 3

我也遇到了同样的问题。我尝试了很多个小时来解决这个问题。 Laravel 9.19.0+ 使用 Vite 取代 Laravel Mix 来捆绑资源。 https://laravel.com/docs/9.x/vite#main-content

Laravel Breeze 和 Jetstream 等入门套件组件一直在使用

@vite

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

当我们运行

npm run dev

vite 将在下面创建自己的主机。

> dev
> vite

vite v2.9.13 dev server running at:

> Local: http://localhost:3000/
> Network: use `--host` to expose

ready in 364ms.


Laravel v9.19.0

> APP_URL: http://shop.test

并始终将我们的风格和脚本嵌入到该主机中

http://127.0.0.1:3000/

<link rel="stylesheet" href="http://127.0.0.1:3000/resources/css/app.css">
<script type="module" src="http://127.0.0.1:3000/resources/js/app.js"></script>

我在文件夹

hot

中发现了一个文件名

public

，是在我们运行命令

npm run dev

期间创建的，并且它永远不会被删除。

要解决此问题，我只需在

hot

 中添加一些代码即可删除 

package.json

文件

来自

"scripts": {
    "dev": "vite",
    "build": "vite build"
},

至

"scripts": {
    "delhot": "npx rimraf public/hot",
    "dev": "vite",
    "build": "npm run delhot vite build"
},

我希望 Laravel Vite 的下一个版本能够解决这个问题。

Answer 4

作曲家创建项目 Laravel/Laravel app_name 9.1.0 只需使用这个 laravel 版本

Answer 5

以下解决方案对我有用， 检查 laravel 日志，可能存在问题，您没有导入 vite.cofing.js 中的所有文件， 例如在我的 app.blade 中我正在使用

 @vite(['resources/css/app.css', 'resources/js/app.js'])
    @vite('resources/css/app.css')
    @vite('resources/css/extra.css')
    @vite('resources/css/partical.css')
    @vite('resources/css/scroll.css')
    @vite('resources/css/faqs.css')
    @vite('resources/css/animate.css')

---

所以在我的 vite.config.js 中，我必须添加这些，假设你有 2 个 vite.config.js 和 vite.config.js.timestamp ，你必须添加两个

导出默认的defineConfig({

 plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/css/partical.css',
                'resources/css/scroll.css',
                'resources/css/faqs.css',
                'resources/css/animate.css',
                "resources/css/extra.css",
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

---

在我的package.json中

"scripts": {
        "delhot": "npx rimraf public/hot",
        "dev": "vite",
        "build": "npm run delhot && vite build"
    },

这个解决方案对我有用，我的 app.css 没有显示在前端源代码中