讲师中心 微信公众号
AI工具推荐 视频效率加速

Mac下Laravel9怎么使用Vite打包

星敏酱_5926

星敏酱_5926

发布时间:2026-09-17 14:28:22

|

729人浏览过

|

来源于php中文网

原创

核心是确保 laravel-vite-plugin 正确生成 public/build/manifest.json:插件必须位于 vite.config.js 的 plugins 数组首位、build.outDir 不可修改、且须安装官方插件而非 vite-plugin-laravel。

mac下laravel9怎么使用vite打包

Mac 下 Laravel 9 使用 Vite 打包,核心就一条:别碰 vite.config.js 里 build.outDir 和 plugins 顺序,否则 @vite 指令在生产环境必报 404 —— 这不是路径写错了,是 manifest.json 根本没生成或没被读到。

为什么 npm run build 后 public/build 里没有 manifest.json

这是 Mac 用户最常卡住的第一步。Laravel 的 laravel-vite-plugin 在构建时必须生成 public/build/manifest.json,而这个文件是 @vite 指令在生产环境解析资源路径的唯一依据。

  • 运行 npx vite build --debug,如果终端第一行出现 [vite] Manifest is disabled,说明插件根本没生效 —— 很可能你装的是 vite-plugin-laravel(不兼容),而不是官方的 laravel-vite-plugin
  • build.outDir 被手动改成 public/assets 或其他路径?别改。Laravel 硬编码只认 public/build,改了等于废掉 @vite
  • laravel() 插件没放在 plugins 数组第一位?它必须在 vue() 或 react() 之前,否则 manifest 不生成

@vite 指令在 Blade 中怎么写才不 500

@vite 不是语法糖,它是服务端指令,编译阶段就执行,对写法极其敏感。

laravel-specialist
laravel-specialist

精通 Laravel 10+,遵循现代 PHP 实践的 Laravel 专家。擅长优雅语法、Eloquent ORM、队列系统及企业级特性...

下载
  • 参数必须是数组:@vite(['resources/js/app.js', 'resources/css/app.css']);传字符串如 @vite('resources/js/app.js') 会触发 PHP 的 Array to string conversion 错误
  • 路径必须以 resources/ 开头,不能带 ./ 或 ../,比如 @vite(['./resources/js/app.js']) 会找不到入口
  • 不能嵌套在 @if、@section、@push 等 Blade 指令块内,它得在模板顶层直接出现
  • 开发时它注入的是 http://localhost:5173/@vite/client,生产时自动 fallback 到 public/build/ 下的哈希文件 —— 所以你不需要也不应该手动切环境

Mac 上 npm run dev 启动失败或 HMR 不生效

Mac 系统常见干扰项集中在端口、host 和 Node 版本兼容性上。

  • 终端报 command not found: vite?检查 package.json 的 scripts 里有没有 "dev": "vite",并且你是在项目根目录(含 vite.config.js 和 package.json)下执行的
  • 浏览器控制台报 WebSocket 连接失败?vite.config.js 里 server.host 别设成 '0.0.0.0',Mac 上容易被 Safari/Chrome 拒绝;设为 true 或显式 'localhost' 更稳
  • HMR 改了 Vue 组件没反应?确认 laravel({ refresh: true }) 已启用,且 resources/js/app.js 里确实 import 了该组件(空文件或没 import 就不会监听)
  • APP_URL 设成 http://localhost:8000,但 Vite 默认跑在 :5173 —— 这没关系,HMR 请求地址由 vite.config.js 的 server 配置决定,不是 APP_URL

图片、字体等静态资源引用失效怎么办

Vite 不处理 public/ 下的文件,所有需要哈希和 CDN 缓存失效的资源,必须走构建流程。

  • 把 logo.png 放进 resources/images/,然后在 CSS 里写 background: url('../images/logo.png'); —— Vite 会自动哈希并复制到 public/build/
  • 千万别在 Blade 里用 url('/images/logo.png') 引用 public/images/ 下的图,它绕过 Vite,不会进 manifest,上线后缓存永远不更新
  • SVG 当组件用?确保已安装对应框架插件(如 @vitejs/plugin-vue),否则 import Icon from './Icon.vue' 会解析失败

真正容易被忽略的点是:manifest.json 的存在与否,决定了整个生产环境是否可用;而它的生成,完全取决于 laravel-vite-plugin 是否被正确加载、是否在插件列表首位、以及 build.outDir 是否保持默认值 —— 其他配置再炫酷,这三项错一个,@vite 就形同虚设。

热门AI工具

更多
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

相关专题

更多
laravel组件介绍
laravel组件介绍

laravel 提供了丰富的组件,包括身份验证、模板引擎、缓存、命令行工具、数据库交互、对象关系映射器、事件处理、文件操作、电子邮件发送、队列管理和数据验证。想了解更多laravel的相关内容,可以阅读本专题下面的文章。

857

2024.04.09

laravel中间件介绍
laravel中间件介绍

laravel 中间件分为五种类型:全局、路由、组、终止和自定。想了解更多laravel中间件的相关内容,可以阅读本专题下面的文章。

835

2024.04.09

laravel使用的设计模式有哪些
laravel使用的设计模式有哪些

laravel使用的设计模式有:1、单例模式;2、工厂方法模式;3、建造者模式;4、适配器模式;5、装饰器模式;6、策略模式;7、观察者模式。想了解更多laravel的相关内容,可以阅读本专题下面的文章。

2488

2024.04.09

thinkphp和laravel哪个简单
thinkphp和laravel哪个简单

对于初学者来说,laravel 的入门门槛较低,更易上手,原因包括:1. 更简单的安装和配置;2. 丰富的文档和社区支持;3. 简洁易懂的语法和 api;4. 平缓的学习曲线。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

4181

2024.04.10

laravel入门教程
laravel入门教程

本专题整合了laravel入门教程,想了解更多详细内容,请阅读专题下面的文章。

6010

2025.08.05

laravel实战教程
laravel实战教程

本专题整合了laravel实战教程,阅读专题下面的文章了解更多详细内容。

3976

2025.08.05

laravel面试题
laravel面试题

本专题整合了laravel面试题相关内容,阅读专题下面的文章了解更多详细内容。

7469

2025.08.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

1456

2026.03.04

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

60

2026.10.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
如何安装 Composer
如何安装 Composer

共1课时 | 208人学习

Composer手册
Composer手册

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn