laravel11中使用vite进行资源管理:
@vite('resources/css/welcome.css')
对于不同的打包方式, npm run dev 和 npm run build, 那么资源访问是不一样的:
1. 开发环境 (`npm run dev`):
当你运行`npm run dev`时,Vite启动一个开发服务器。这个服务器会:
- 监听你的源文件变化
- 提供热模块替换(HMR)
- 按需编译文件
在这种模式下,`@vite()`指令会:
- 注入Vite的客户端脚本
- 创建一个`<script>`标签,指向Vite开发服务器上的入口文件
- 创建一个`<link>`标签,指向CSS文件(如果是独立的CSS文件)
这样,浏览器可以从Vite开发服务器请求并加载资源,实现快速的开发体验。
2. 生产环境 (`npm run build`):
当你运行`npm run build`时,Vite会:
- 编译、压缩、优化所有资源
- 生成带有哈希的文件名,用于缓存破坏
- 创建一个manifest.json文件,映射原始文件名到编译后的文件名
在这种模式下,`@vite()`指令会:
- 读取manifest.json文件
- 根据manifest中的映射,输出正确的`<script>`和`<link>`标签,指向编译后的文件
这种方法允许Laravel在开发和生产环境中都能正确地引用和加载资源,而不需要更改你的代码。
值得注意的是,Laravel的`vite.php`配置文件和`Vite`facade处理了大部分复杂性,使得开发者可以轻松地在Laravel项目中集成和使用Vite。
