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

在此之前,你需要创建一个Laravel项目,并准备PHPNode.js环境。

安装 Vite 插件

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

npm install

配置 Vite

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

这里指定了app.cssapp.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.cssapp.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

最后

拥抱新事物,提高幸福感。