laravel 集成 vue3 的前端项目

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

好在 laravel 给我们提供了 Vite，下面我以一个纯前端的项目企业展示型小程序 - 管理员端为例，介绍一下如何把 vue3 项目集成到 laravel

准备

创建一个laravel的项目

代码语言：javascript复制

composer create-project laravel/laravel=10.* --prefer-dist laravel-demo

大概步骤

代码语言：javascript复制

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：

代码语言：javascript复制

node -v

配置 Vite & Vue

vite.config.js 配置文件

代码语言：javascript复制

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

代码语言：javascript复制

# Run the Vite development server...
npm run dev

# Build and version the assets for production...
npm run build

Vue

如果你想要使用 Vue 框架构建前端，那么你还需要安装 @vitejs/plugin-vue 插件：

代码语言：javascript复制

npm install --save-dev @vitejs/plugin-vue

修改 vite.config.js

代码语言：javascript复制

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

代码语言：javascript复制

Route::get('{path}', function () {
    return view('spa');
})->where('path', '(.*)');

模板文件

vi resources/views/spa.blade.php

代码语言：javascript复制

<!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

安装依赖并运行

代码语言：javascript复制

npm install
npm run dev / npm run build

最后访问访问laravel项目的域名就可以访问页面了，如：http://newblog.cw.net，即.env中的APP_URL

参考

https://learnku.com/docs/laravel/10.x/vite/14853

https://github.com/gdarko/laravel-vue-starter

前端 laravel vue3 插件服务器

0 人点赞