首页 > 分享 > 在 Laravel 中使用 Vite 来构建静态资源

在 Laravel 中使用 Vite 来构建静态资源

花匠小妙招
2025-07-04 18:14

JonLee 的个人博客 / 209 / 2 / 创建于 5个月前 / 更新于 5个月前

之前做Laravel项目，一直使用的是Laravel Mix打包静态资源。但是随着Vite的横空出世，Laravel已经默认使用Vite来打包静态资源了。

在此之前，你需要创建一个Laravel项目，并准备PHP和Node.js环境。

安装 Vite 插件

Laravel的Vite插件是laravel-vite-plugin。项目默认的package.json中的依赖项已经包含了，只需要安装一下即可。

npm install

配置 Vite

在项目的根目录有一个vite.config.js文件，显而易见，这就是Vite的配置文件。

这里指定了app.css和app.js的入口文件。

import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; export default defineConfig({ plugins: [ laravel([ 'resources/css/app.css', 'resources/js/app.js', ]), ], });

在页面中加载静态资源

在blade视图文件中，引入app.css和app.js文件，这里使用的是resources/views/welcome.blade.php。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> @vite('resources/css/app.css') </head> <body id="app"> Hello Vite </body> @vite('resources/js/app.js') </html>