laravel 集成 vue3 的前端项目

编辑于 2024-05-13 14:02:56 阅读 327

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

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

参考

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

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

广而告之,我的新作品《语音助手》上架Google Play了,欢迎下载体验