laravel 集成 vue3 的前端项目

崔哥

发布于 2024-05-15 21:37:21

1440

发布于 2024-05-15 21:37:21

文章被收录于专栏：崔哥的专栏崔哥的专栏

现在大多项目都是前后端分离的，但是如果前后端都是一个人做，前后端来回切也挺不方便的。

好在 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>