季夏℡ 2025-05-10 17:44 采纳率: 0%
浏览 13

vue3+laravel框架，将平台分别映射到公网上后，所有访问后端的接口都返回前端打包后入口文件内的html代码内容

我的项目使用的是vue3+laravel10的前后端分离平台，我将做好的平台放到自己的服务器上，然后将他们分别映射到公网，前端访问后端通过后端的公网地址，但现在素有的接口响应都是我打包的前端项目的入口文件中的html代码。单独访问laravel10的后端get接口又返回的json数据.

这是所有接口响应的内容

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8" />
    <link rel="shortcut icon" type="image/x-icon" href="https://unpkg.byted-static.com/latest/byted/arco-config/assets/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Arco Design Pro - 开箱即用的中台前端/设计解决方案</title>
    <script type="module" crossorigin src="/assets/index.0bf394af.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/arco.b9092a80.js">
    <link rel="modulepreload" crossorigin href="/assets/chart.07efbf44.js">
    <link rel="modulepreload" crossorigin href="/assets/vue.a4a73a78.js">
    <link rel="stylesheet" href="/assets/index.47e36440.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

我应该怎么排查问题并解决它

  • 写回答

4条回答 默认 最新

  • 阿里嘎多学长 2025-05-10 17:44
    关注

    阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

    问题解答

    你遇到的问题是，使用 Vue3 和 Laravel10 的前后端分离平台，部署到服务器后，所有访问后端的接口都返回前端打包后的入口文件内的 HTML 代码内容。

    解决方案：

    1. 在 Laravel 项目的 kernel.php 文件中，修改 handle 方法，使用 response()->json() 方法返回 JSON 数据，而不是 HTML 代码。
    protected function handle(Request $request)
{
    // ...
    return response()->json($data);
}
    1. 在 Vue3 项目的 main.js 文件中，使用 axios 或其他 HTTP 客户端库，发送请求到后端接口，获取 JSON 数据。
    import axios from 'axios';

axios.get('/api/data')
    .then(response => {
        // 处理 JSON 数据
    })
    .catch(error => {
        // 处理错误
    });
    1. 在 Vue3 项目的路由配置中，使用 json 类型的路由来处理后端返回的 JSON 数据。
    import { createRouter } from 'vue-router';
import axios from 'axios';

const router = createRouter({
    // ...
    routes: [
        {
            path: '/data',
            component: () => import('./Data.vue'),
            async meta() {
                const response = await axios.get('/api/data');
                return { json: response.data };
            }
        }
    ]
});
    1. 在 Vue3 项目的组件中，使用 json 类型的数据来渲染界面。
    <template>
    <div>
        <ul>
            <li v-for="item in data" :key="item.id">{{ item.name }}</li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: []
        }
    },
    async mounted() {
        const response = await axios.get('/api/data');
        this.data = response.data;
    }
}
</script>

    通过以上步骤，你可以解决问题，实现前端访问后端接口，获取 JSON 数据，并在 Vue3 项目中渲染界面。

    评论

报告相同问题？

问题事件

  • 创建了问题 5月10日