如何使用Laravel Vue开发响应式单页Web应用？

1. 项目初始环境配置 #

• 先安装最新版Laravel框架，运行命令 composer create-project laravel/laravel your-project-name
• 进入项目目录后安装基础前端依赖：npm install
• 安装Vue3及配套生态依赖：npm install vue@latest vue-router@4 @vitejs/plugin-vue，当前版本Laravel默认使用Vite作为构建工具，无需使用旧版Laravel Mix
• 配置Vite适配Vue：打开项目根目录的vite.config.js，新增Vue插件配置，参考示例：

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue(),
    ],
});

2. 前端核心逻辑配置 #

• 在resources/js目录下创建App.vue作为Vue应用的根组件，基础结构参考：

<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 路由出口 -->
    <router-view />
  </div>
</template>

• 配置Vue路由：在resources/js下新建router/index.js文件，管理所有前端路由：

import { createRouter, createWebHistory } from 'vue-router'
// 导入自定义页面组件
import Home from '../views/Home.vue'
import ArticleList from '../views/ArticleList.vue'

const routes = [
  { path: '/', component: Home, name: '首页' },
  { path: '/articles', component: ArticleList, name: '文章列表' },
  // 其他路由按需添加
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

• 修改入口文件resources/js/app.js，挂载Vue应用：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

3. Laravel后端适配配置 #

• 配置后端路由：所有非API请求都指向Vue的入口Blade模板，打开routes/web.php，替换原有路由规则：

use Illuminate\Support\Facades\Route;

Route::get('/{any}', function () {
    return view('app');
})->where('any', '.*');

• 创建Vue入口Blade模板：在resources/views下新建app.blade.php，引入Vite编译资源并挂载Vue根节点：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <!-- 响应式基础视口配置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SPA应用</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <div id="app"></div>
</body>
</html>

4. 前后端数据交互实现 #

• 所有后端接口统一写在routes/api.php文件中，Laravel默认给该文件下的路由加了/api前缀，可按需添加路由组、身份校验中间件
• Vue侧直接使用Laravel预装的axios发送请求即可，无需额外配置跨域，本地开发场景下Laravel默认CORS配置已适配，部署时可按需修改config/cors.php调整规则，请求示例：

axios.get('/api/articles')
  .then(res => {
    // 处理返回的列表数据
  })
  .catch(err => {
    // 处理异常
  })

• 如需用户身份认证，直接使用Laravel Sanctum的SPA认证模式即可，无需额外适配JWT。

5. 响应式布局适配 #

• 推荐搭配Tailwind CSS实现响应式开发，Laravel官方已提供Tailwind预设配置，安装后直接在Vue组件模板中使用响应式类即可，无需编写大量自定义媒体查询代码
• 复杂交互场景下可监听视口尺寸变化做动态适配，也可直接使用VueUse的useWindowSize工具方法快速实现适配逻辑。

6. 开发与部署流程 #

• 本地开发时启动两个终端，一个运行Laravel服务 php artisan serve，另一个运行Vite热更新服务 npm run dev
• 生产部署时先执行 npm run build 编译前端静态资源，再将整个项目部署到服务器，配置Nginx指向项目public目录即可，无需单独部署前端服务。

内容的提问来源于stack exchange，提问作者Saanvi Sen