Vue.js3+Laravel11项目Vite构建后Axios请求404问题求助

问题概述 #

开发环境下Axios请求正常，执行npm run build构建生产包后，发起/getqcmts请求返回404错误：

XHRGET http://127.0.0.1/getqcmts [HTTP/1.1 404 Not Found 6ms]

相关代码：

// 原请求
axios.get('/getqcmts')
  .then(response => { clas.value = response.data })
  .catch(error => { console.log(error) });

// 尝试全路径仍报错
axios.get('http://127.0.0.1/getqcmts')

针对疑问的解答 #

1. 生产环境下Axios或Vite是否需要特定配置？ #

• Axios必须配置baseURL：开发时Vite的代理会自动转发请求到Laravel后端，但生产环境没有代理机制，必须显式指定后端地址。初始化Axios时做如下配置：

  import axios from 'axios';
  axios.defaults.baseURL = import.meta.env.VITE_API_BASE_URL;
  

  在项目根目录的.env文件中添加环境变量：

  VITE_API_BASE_URL=http://你的Laravel服务域名（如127.0.0.1:8000）
  

• Vite检查build输出目录：Laravel 11默认已配置Vite将构建产物输出到public/build，但可以确认vite.config.js中的配置：

  export default defineConfig({
    build: {
      outDir: 'public/build',
      emptyOutDir: true,
    },
    // 开发时的proxy配置仅在dev环境生效，生产环境可删除或注释
  });
  

2. Vue中API端点是否需要采用不同的处理方式？ #

• 禁止硬编码API路径，统一用环境变量拼接：

  axios.get(`${import.meta.env.VITE_API_BASE_URL}/getqcmts`)
  

• 若前后端分开部署，需配置Laravel的CORS规则：修改config/cors.php，添加允许的前端域名和API路径：

  'paths' => ['api/*', '/getqcmts'],
  'allowed_origins' => ['http://你的前端域名'],
  

3. 该问题是否与Laravel生产环境的API路由结构相关？ #

• 这是最常见的原因：
  • 检查路由位置：如果/getqcmts定义在routes/api.php中，Laravel会自动添加/api前缀，实际请求地址应为/api/getqcmts；若定义在routes/web.php中，需确保路由未被中间件限制。
  • 清除路由缓存：生产环境Laravel会缓存路由，新增或修改路由后需执行：

    php artisan route:clear
    

  • 检查服务器配置：确保Nginx/Apache将所有非静态资源请求转发到index.php，比如Nginx配置：

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }
    

快速排查步骤 #

1. 确认Laravel路由的实际访问路径（是否带/api前缀）。
2. 执行php artisan route:clear清除路由缓存。
3. 配置Axios的baseURL环境变量。
4. 检查服务器是否正确转发请求到Laravel的index.php。
5. 跨域场景下配置Laravel的CORS规则。

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