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

《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
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年前

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