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 前端工作流等。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
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创建文件好了,难受。

1年前 评论
Sen (楼主) 1年前
讨论数量: 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创建文件好了,难受。

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

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

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

楼上分享的链接失效了

1年前 评论

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

1年前 评论

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

1年前 评论

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

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

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