如何将Laravel-Vue架构拆分独立为纯Vue 2前端项目？

你当前的方案需要同时运行两个命令，核心原因是还在依赖Laravel Mix的热重载服务。要实现像常规Vue项目一样单命令启动，只需要把前端代码迁移到纯Vue项目，并利用Vue开发服务器自带的代理功能替代Express，具体步骤如下：

• 迁移前端代码到纯Vue项目

  • 用Vue CLI或Vite创建一个全新的Vue项目（推荐Vite，启动更快、配置更简洁）：

    # Vue CLI
    vue create frontend
    # Vite
    npm create vite@latest frontend -- --template vue
    

  • 将原Laravel项目中resources/js下的组件、路由、状态管理、API请求逻辑等代码，迁移到新Vue项目对应目录中。

• 配置Laravel后端跨域（适配Sanctum）
  确保Laravel后端的CORS配置允许前端域名访问，修改config/cors.php：

  return [
      'paths' => ['api/*', 'sanctum/*'],
      'allowed_methods' => ['*'],
      'allowed_origins' => ['http://localhost:5173', 'http://localhost:8080'], // 你的前端开发域名
      'allowed_origins_patterns' => [],
      'allowed_headers' => ['*'],
      'exposed_headers' => [],
      'max_age' => 0,
      'supports_credentials' => true, // 必须开启，Sanctum需要通过Cookie传递认证状态
  ];
  

• 配置Vue开发服务器代理（替代Express）
  利用Vue开发服务器自带的代理功能，直接转发API请求到Laravel后端，无需额外的Express服务器：

  • 若使用Vue CLI（项目根目录创建vue.config.js）：

    module.exports = {
      devServer: {
        proxy: {
          '/api': {
            target: 'http://localhost:8000', // 你的Laravel后端地址
            changeOrigin: true,
            withCredentials: true // 传递Cookie，适配Sanctum认证
          },
          '/sanctum': {
            target: 'http://localhost:8000',
            changeOrigin: true,
            withCredentials: true
          }
        }
      }
    }
    

  • 若使用Vite（修改vite.config.js）：

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    
    export default defineConfig({
      plugins: [vue()],
      server: {
        proxy: {
          '/api': {
            target: 'http://localhost:8000',
            changeOrigin: true,
            credentials: true
          },
          '/sanctum': {
            target: 'http://localhost:8000',
            changeOrigin: true,
            credentials: true
          }
        }
      }
    })
    

• 调整前端API请求配置
  确保你的HTTP客户端（比如Axios）开启withCredentials，以保留Sanctum的认证Cookie：

  import axios from 'axios'
  
  axios.defaults.baseURL = '/api'
  axios.defaults.withCredentials = true
  

• 清理旧配置

  • 删除原方案中的server.js、Laravel Mix相关依赖及package.json中的hot、serve命令
  • 新Vue项目的package.json默认已包含dev命令，直接运行：

    npm run dev
    

这样调整后，你就能像常规Vue项目一样，只用npm run dev启动前端服务，同时自动代理API请求到Laravel后端，Sanctum的登录认证功能也能正常工作。

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