laravel9使用vite
# Laravel9.x 使用 vite 构建 Bootstrap5
# 第一步:安装Laravel ui
composer require laravel/ui
1
# 第二步:使用bootstrap5
# 可以先查看 laravel9 artisan的命令有哪些
php artisan
1
2
2
这里是要使用bootstrap5
所以选择使用命令
php artisan ui bootstrap
1
如果你想顺便再生产登录注册页面
php artisan ui bootstrap --auth
1
# 第三步:修改app.js
在app.js
中导入bootstrap5和scss
import './bootstrap'
import '../sass/app.scss'
import * as bootstrap from 'bootstrap'
1
2
3
4
2
3
4
# 第四步:修改vite.config.js
import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import path from 'path'
export default defineConfig({
plugins: [
laravel({
input: ['resources/js/app.js'],
refresh: true,
}),
],
// 前端资源监听的端口
server: {
host: '127.0.0.1',
port: 3001,
},
resolve: {
// 给 bootstrap 配置别名
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
},
},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
这里可以把原先的resources/scss/app.scss
去掉了,因为在app.js
里已经引入了。
# 第五步:修改app.blade.php
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
// 替换为
@vite(['resources/js/app.js'])
1
2
3
2
3
# 第六步:编译、运行
yarn install
yarn dev
1
2
2
注意
我这里是在docker
环境下,如果使用yarn dev
,前端也需要一个监听端口,这里在vite.config.js
里设置的是3001
,一般来说是3000
,我这里是已经有占用的,所以改了,所以如果有也是用docker-compose.yaml
的,里面宿主机的端口需要换成对应的不占用的端口。
而且这里如果使用的是yarn dev
可能前端资源不会生效,不知道为啥,我是这样的,但是后面如果使用yarn build
反而生效了。
一般不发生啥对
js
和css
的大改动,直接build
之后使用,不一直开着yarn dev
也挺好的。
yarn build
1
编辑 (opens new window)
上次更新: 2022/10/29, 21:18:01