在 Laravel 中使用 Vite 来构建静态资源
220 / 2 / 创建于 9个月前 /
JonLee 的个人博客
之前做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最后
拥抱新事物，提高幸福感。
本作品采用《CC 协议》，转载必须注明作者和本文链接
专注于分享 Go、Java、Python、PHP、Node.js 等全栈技术开发领域知识，欢迎关注我的 技术圈！
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：