0

0

Laravel怎么加载静态资源_Laravel使用Vite编译CSS和JS【技巧】

穿越時空

穿越時空

发布时间:2026-02-08 08:20:38

|

139人浏览过

|

来源于php中文网

原创

Vite build后CSS/JS未生效,因Laravel默认沿用mix()逻辑,而Vite产物路径、哈希管理及HTML注入方式不同;需改用@vite指令并确保模板位置、入口配置与vite.config.js严格匹配。

laravel怎么加载静态资源_laravel使用vite编译css和js【技巧】

为什么 vite build 后 CSS/JS 没生效?

因为 Laravel 默认仍走传统的 mix() 资源函数逻辑,而 Vite 编译产物路径、版本控制、HTML 注入方式完全不同——不改模板和配置,浏览器根本找不到新文件。

  • 检查 Blade 模板里是否还留着 @viteReactRefresh 或旧的 mix() 调用,二者不能混用
  • @vite 必须放在 里(CSS)和 前(JS),否则资源加载顺序错乱
  • Vite 开发服务器默认只监听 resources/jsresources/css,放错目录(比如写成 assets/)会导致热更新失效

@vite 在 Blade 中怎么写才不出错?

它不是简单替换 mix() 的标签,而是会自动注入开发时的 HMR 脚本或构建后的带哈希的资源链接——前提是项目结构和 vite.config.js 对得上。

  • 开发环境:@vite(['resources/css/app.css', 'resources/js/app.js']) 会注入 和 HMR 客户端
  • 生产环境:vite build 后,同一行会生成带完整哈希的
  • 不要手动拼接路径,比如 @vite('build/assets/app.123abc.css') —— 这样会绕过 Vite 的哈希管理和入口依赖分析

public 目录下静态文件(如图片、字体)怎么引用?

Vite 不处理 public/ 下的文件,但 Laravel 的 asset() 函数依然可用;关键在于区分“由 Vite 打包的资源”和“直接丢进 public 的静态文件”。

文赋Ai论文
文赋Ai论文

专业/高质量智能论文AI生成器-在线快速生成论文初稿

下载
  • 图片、SVG、字体等若需被 CSS/JS 引用并参与构建(比如 CSS 里的 background: url('@/images/logo.svg')),必须放在 resources/ 下,用相对路径或别名导入
  • 如果只是 HTML 中直接 Laravel怎么加载静态资源_Laravel使用Vite编译CSS和JS【技巧】,那就老老实实扔进 public/images/,Vite 完全不干涉
  • 注意:Vite 的 public/ 是开发时的静态服务根目录,和 Laravel 的 public/ 是两个东西,别搞混

升级到 Laravel 11+ 后 @vite 报错找不到入口?

Laravel 11 默认移除了 vite.config.js 的自动创建逻辑,且要求入口文件名严格匹配 resources/js/app.jsresources/css/app.css,否则 @vite 无法推导出构建产物位置。

立即学习前端免费学习笔记(深入)”;

  • 确认 vite.config.jsbuild.rollupOptions.input 是否显式指定了入口,例如:input: { app: './resources/js/app.js' }
  • 如果用了多入口(如后台 admin.js),@vite(['resources/js/app.js', 'resources/js/admin.js']) 必须一一对应,漏一个就会导致部分 JS 不加载
  • 清掉 bootstrap/cache/config.phpstorage/framework/views/ 缓存,Blade 编译缓存有时会卡住旧的 Vite manifest 解析逻辑
Vite 和 Laravel 的衔接点其实就卡在三处:Blade 标签行为、资源路径约定、构建产物映射。很多人调半天发现是 vite.config.js 里改了 build.outDir 却没同步更新 Laravel 的 manifest 解析逻辑——这种细节不报错,但资源就是 404。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

326

2024.04.09

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

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

283

2024.04.09

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

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

477

2024.04.09

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

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

377

2024.04.10

laravel入门教程
laravel入门教程

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

106

2025.08.05

laravel实战教程
laravel实战教程

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

74

2025.08.05

laravel面试题
laravel面试题

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

68

2025.08.05

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

516

2023.06.20

Golang处理数据库错误教程合集
Golang处理数据库错误教程合集

本专题整合了Golang数据库错误处理方法、技巧、管理策略相关内容,阅读专题下面的文章了解更多详细内容。

39

2026.02.06

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PHP课程
PHP课程

共137课时 | 11.3万人学习

JavaScript ES5基础线上课程教学
JavaScript ES5基础线上课程教学

共6课时 | 11.2万人学习

PHP新手语法线上课程教学
PHP新手语法线上课程教学

共13课时 | 0.9万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号