Laravel9+Vue3(Vite)项目端点管理及刷新404问题求助

一、客户端Vue3与后端Laravel9的端点管理方法 #

1. 环境变量统一配置API根地址 #

在项目根目录的.env文件中添加API地址（Vite环境变量需以VITE_开头）：

VITE_API_URL=http://your-project-domain/api

然后在Vue中封装Axios实例，统一使用该根地址：

// resources/js/utils/axios.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
});

// 可选：添加请求拦截器，自动携带认证token
apiClient.interceptors.request.use(config => {
  const token = localStorage.getItem('auth_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export default apiClient;

2. 后端API路由规范 #

将所有后端API路由放在routes/api.php中，Laravel会自动给这些路由加上/api前缀：

// routes/api.php
use App\Http\Controllers\AuthController;

Route::post('/register', [AuthController::class, 'register'])->name('api.register');
Route::post('/login', [AuthController::class, 'login'])->name('api.login');

3. 前端维护端点常量 #

创建专门的端点常量文件，集中管理所有API路径，便于后续统一修改：

// resources/js/utils/endpoints.js
export const API_ENDPOINTS = {
  REGISTER: '/register',
  LOGIN: '/login',
  USER_PROFILE: '/user/profile'
};

调用示例：

import apiClient from './utils/axios';
import { API_ENDPOINTS } from './utils/endpoints';

async function registerUser(userData) {
  try {
    const response = await apiClient.post(API_ENDPOINTS.REGISTER, userData);
    return response.data;
  } catch (error) {
    console.error('注册失败:', error);
    throw error;
  }
}

二、刷新Register页面返回404的解决方案 #

问题原因 #

Vue Router使用createWebHistory()时，刷新页面会直接向Laravel服务器请求对应路径（比如/register），但Laravel的routes/web.php中没有该路由，因此返回404。

解决步骤 #

修改routes/web.php，添加一个兜底路由，将所有前端路由请求指向Vue入口页面welcome.blade.php：

// routes/web.php
// 保留原根路由
Route::get('/', function () {
    return view('welcome');
});

// 兜底路由：匹配所有未定义的GET请求
Route::get('/{any}', function () {
    return view('welcome');
})->where('any', '.*');

注意：该路由必须放在所有Laravel web路由的最后，避免影响正常的后端页面路由。

这样，刷新/register时，Laravel会返回Vue入口页面，Vue Router会根据当前URL渲染对应的Register.vue组件，解决404问题。

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