laravel 12 怎么部署 内置的前端单页面应用?

AI摘要
用户分享了一个基于Laravel 12和Vue.js的单页面管理后台项目配置,并提出了一个关于生产环境部署的具体技术问题。内容涉及前端构建工具Vite的配置、Laravel控制器与视图的代码片段,以及构建后生成的文件结构。用户的核心疑问在于,在开发环境运行正常的情况下,如何将使用`npm run build`命令生成的前端资源正确配置到生产环境中。这是一个典型的Web开发技术问题。

最近在用laravel12做一个项目,用laravel的内置前端做了个单页面管理后台,配置如下:

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css', 
                'resources/js/app.js'],
            refresh: true,
        }),
        vue(),
        tailwindcss(),
    ],
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.esm-bundler.js'
        }
    },
});

后台页面控制器 /app/Http/Controllers/Admin/IndexController.php

<?php

namespace App\Http\Controllers\BC;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class IndexController extends Controller
{
    public function index()
    {
        return view('spa');
    }
}

后台页面入口 /resource/views/spa.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue SPA Demo</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <div id="app"></div>
</body>
</html>

web路由文件:

<?php

use Illuminate\Support\Facades\Route;
Route::get('/{patchMatch}','App\Http\Controllers\BC\IndexController@index');

开发环境下运行 php artisan serve + npm run dev 可以正常访问,但是我运行npm build 之后在public文件夹下生成了build文件夹 里面只有assets和一个manifest.json 那我部署到生产环境应该怎么配置呢?请各位大神告知一下

《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
讨论数量: 1

只要把 nginx 配置好就行,参考 服务器配置

2天前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!