Laravel8.5使用套件laravel breeze ,所有页面版式都未正确加载

1. 运行环境

windows10+php7.4.30+nginx+laravel8.5+node16.15.1

2. 问题描述?


使用laravel breeze套件,安装后,npm run dev也成功后, 登录网站出现的版式错乱,css,和js未加载成功, @vite([‘resources/css/app.css’, ‘resources/js/app.js’]), @vite未被正确使用.想知道出现这种情况的原因是什么,因为对前端不熟悉, 所以不能定位到问题.所有步骤全部是按照文档来的,并且没有出现任何报错

3. 您期望得到的结果?

能正常显示laravel breeze 的各个页面

4. 您实际得到的结果?

laravel breeze的各个页面版式错乱,没有正常应用css JS

《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
mengdodo
最佳答案

我今天也踩到这个坑里了。

对照YouTube上最新的这条#54 Authentication-Breeze视频,发现我本地的npm run dev后压根没有mix打包动作。

七天前的这次修改 可以看到官方修改了package.json文件,结果只保留了两项。

        "dev": "vite",
        "build": "vite build"

翻了下官方laravel-breeze文档, npm install && npm run dev命令也没错啊 :joy:。

好吧侦探模式到此结束,直接npm run build创建文件好了,难受。

2年前 评论
Sen (楼主) 2年前
讨论数量: 10
mengdodo

我今天也踩到这个坑里了。

对照YouTube上最新的这条#54 Authentication-Breeze视频,发现我本地的npm run dev后压根没有mix打包动作。

七天前的这次修改 可以看到官方修改了package.json文件,结果只保留了两项。

        "dev": "vite",
        "build": "vite build"

翻了下官方laravel-breeze文档, npm install && npm run dev命令也没错啊 :joy:。

好吧侦探模式到此结束,直接npm run build创建文件好了,难受。

2年前 评论
Sen (楼主) 2年前
mengdodo

找到vite的正确用法了,这是一种替代mix的新的前端搞法, learnku.com/docs/laravel/9.x/vite#...

2年前 评论
Sen (楼主) 2年前

楼上分享的链接失效了

2年前 评论

我用breeze V1.9.1就可以了,composer require laravel/breeze:1.9.1 , 新版本好像都用vite 了

2年前 评论

最后解决的办法呢? npm install && npm run dev 之后也没有解决

2年前 评论

调用composer的时候指定一下breeze的版本 composer require laravel/breeze:"1.9.1" --dev

2年前 评论
lxy9500 2年前
zstartw (作者) 2年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!