指尖上的记忆指尖上的记忆
首页
  • 基础
  • Laravel框架
  • Symfony框架
  • 基础
  • Gin框架
  • 基础
  • Spring框架
  • 命令
  • Nginx
  • Ai
  • Deploy
  • Docker
  • K8s
  • Micro
  • RabbitMQ
  • Mysql
  • PostgreSsql
  • Redis
  • MongoDb
  • Html
  • Js
  • 前端
  • 后端
  • Git
  • 知识扫盲
  • Golang
🌟 gitHub
首页
  • 基础
  • Laravel框架
  • Symfony框架
  • 基础
  • Gin框架
  • 基础
  • Spring框架
  • 命令
  • Nginx
  • Ai
  • Deploy
  • Docker
  • K8s
  • Micro
  • RabbitMQ
  • Mysql
  • PostgreSsql
  • Redis
  • MongoDb
  • Html
  • Js
  • 前端
  • 后端
  • Git
  • 知识扫盲
  • Golang
🌟 gitHub

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。