laravel 集成 vue3 的前端项目
编辑于 2024-05-13 22:02:56 阅读 1115
现在大多项目都是前后端分离的，但是如果前后端都是一个人做，前后端来回切也挺不方便的。
好在 laravel 给我们提供了 Vite，下面我以一个纯前端的项目企业展示型小程序 - 管理员端 为例，介绍一下如何把 vue3 项目集成到 laravel
准备
创建一个laravel的项目
composer create-project laravel/laravel=10.* --prefer-dist laravel-demo
大概步骤
cd laravel-demo
composer install
cp .env.example .env
php artisan key:generate
npm install
npm run dev (or if production npm run build)
在运行 Vite 和 Laravel 插件之前，你必须确保已安装 Node.js（16+）和 NPM：
node -v
配置 Vite & Vue
vite.config.js 配置文件
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/main.js'],
refresh: true,
}),
],
resolve: {
alias: {
'@': '/resources/js'
}
},
});
运行 Vite
# Run the Vite development server...
npm run dev
# Build and version the assets for production...
npm run build
Vue
如果你想要使用 Vue 框架构建前端，那么你还需要安装 @vitejs/plugin-vue 插件：
npm install --save-dev @vitejs/plugin-vue
修改 vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel(['resources/css/app.css', 'resources/js/main.js']),
vue({
template: {
transformAssetUrls: {
// Vue 插件会重新编写资产 URL，以便在单文件组件中引用时，指向 Laravel web 服务器。
// 将其设置为 `null`，则 Laravel 插件会将资产 URL 重新编写为指向 Vite 服务器。
base: null,
// Vue 插件将解析绝对 URL 并将其视为磁盘上文件的绝对路径。
// 将其设置为 `false`，将保留绝对 URL 不变，以便可以像预期那样引用公共目录中的资源。
includeAbsolute: false,
},
},
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./resources/js', import.meta.url))
}
},
});
集成 Vue3 项目
web路由
vi routes/web.php
Route::get('{path}', function () {
return view('spa');
})->where('path', '(.*)');
模板文件
vi resources/views/spa.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>管理后台</title>
{{-- 注意：vite.config.js 中的路径也要修改: plugins[laravel({input: ['resources/js/main.js']})]--}}
@vite('resources/js/main.js')
</head>
<body>
<div id="app"></div>
</body>
</html>
复制前端项目
把前端项目克隆到enterprise-admin目录，把相关文件复制到laravel-demo下面（一些参数不能覆盖，需要合并一下）
- enterprise-admin/src/* -> laravel-demo/resources/js/*
- enterprise-admin/package.json -> laravel-demo/package.json
- enterprise-admin/.env.development -> laravel-demo/.env
- enterprise-admin/vite.config.js -> laravel-demo/vite.config.js
安装依赖并运行
npm install
npm run dev / npm run build
最后访问访问laravel项目的域名就可以访问页面了，如：http://newblog.cw.net，即.env中的APP_URL