之前做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>
使用vite构建静态资源
在开发阶段,使用npm run dev
来运行vite
,它会自动监测文件变化,自动更新:
npm run dev
生成环境,则需要将静态资源构建好,生成真正的静态资源文件:
npm run build
最后
拥抱新事物,提高幸福感。