在 laravel 中使用 vite 来构建静态资源 | laravel china 社区-大发黄金版app下载
之前做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
。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>laraveltitle>
@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 协议》,转载必须注明作者和本文链接
我正看这方便的文章,很懵,能否做一个vue3 ts的案例小案例,哪怕只有hello world都行,就是前端如何调用本身控制器的方法,跟前后端分离一样的吗?