laravel 9 中的 NPM RUN DEV答案

【问题标题】：NPM RUN DEV in laravel 9laravel 9 中的 NPM RUN DEV
【发布时间】：2022-08-02 18:02:49
【问题描述】：

enter image description here我在 laravel 中创建一个新项目时遇到问题，我想构建身份验证...这是我的 cmd 命令：

laravel new laravel2030
cd laravel2030
composer require laravel/ui 
php artisan ui bootstrap --auth
npm install 
npm run dev

我没有看到您在此处运行的命令有任何问题。你有什么问题？
屏幕停在这里，当我打开我的项目时，登录和注册页面没有这种 css 样式。
laravel mix 未完成下载。
打开浏览器的开发者控制台，看看那里是否有任何错误。还要仔细检查页面是否从正确的路径加载 css。
非常感谢，我发现将此代码粘贴到项目中效果很好...<link rel=\"stylesheet\" href=\"stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/…\" integrity=\"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk\ " crossorigin=\"anonymous\"> 感谢您的帮助。

标签： php npm xampp laravel-artisan laravel-9

【解决方案1】：

我认为 package.json 文件中的问题

您必须更改 package.json 中的 "dev": "vite"

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

像这样“开发”：“混合”

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

并再次运行 npm run dev。

【讨论】：

【解决方案2】：

现在 laravel 开始实现 Vite 而不是 mixin

所以你需要恢复到我不推荐的混音

通过安装 laravel mix

npm i laravel-mix

然后将 package.json 中的脚本部分更新为这样

"scripts": {
    "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"
},

或第二个选项更新您的 laravel ui 视图文件以与 vite 兼容，我认为 laravel ui 包进行更新以默认实现此功能只是时间问题您可以从第 5 步开始学习本教程（如果您已经有一个项目）或从第一步开始创建新项目，看看如何解决这个问题

https://techvblogs.com/blog/how-to-install-bootstrap-5-in-laravel-9-with-vite

你只需要编辑 4 个文件我认为可以解决这个问题

【讨论】：

【解决方案3】：

在 laravel 9 更新中，我们使用 Vite 而不是 mix 那么你需要运行下面的命令而不是 npm run dev 来构建 app.js、app.css：

运行 Vite 命令构建资产文件

npm run build

在以下位置查看更多信息：https://techvblogs.com/blog/how-to-install-bootstrap-5-in-laravel-9-with-vite

【讨论】：

app.css 运行网站时出错Unable to locate file in Vite manifest: resources/sass/app.scss
嗨，伙计，您需要运行此命令npm run build 来构建 app.css、app.js