axios Vue Vite SPA应用程序未与Laravel API进行通信获取http://localhost:5173/user/projects 404(未找到)

lc8prwob  于 2022-11-05  发布在  iOS
关注(0)|答案(2)|浏览(433)

我试图从一个端点获取一个列表,但它抛出错误404,它从 Postman 工作,但不是在应用程序内.我创建了.env文件手动内应用程序根文件夹.
错误消息显示GET http://localhost:5173/user/projects 404 (Not Found)

.环境:

VUE_APP_API_URL=http://localhost:8000
VUE_APP_PUBLIC_PATH=/

源代码/服务/api.js:

import axios from 'axios';

// eslint-disable-next-line no-undef
const api = axios.create({ baseURL: process.env.NODE_ENV.VUE_APP_API_URL });

export default api;

邀请配置ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import VueRouter from 'unplugin-vue-router/vite'
import { VueRouterAutoImports } from 'unplugin-vue-router'
import Components from 'unplugin-vue-components/vite'
import { HeadlessUiResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    VueRouter({}),
    vue(),
    Components({ resolvers: [HeadlessUiResolver()] }),
    AutoImport({
      imports: ['vue', '@vueuse/head', VueRouterAutoImports],
    }),
  ],
  server: {
    open: true,
  },
})

源文件/页面/项目/索引.版本:

async function listProjects() {
  let projects = [];

    let projectsResponse = '';

    projectsResponse = await api.get('/user/projects');

    if (projectsResponse) {
      projects = projectsResponse.data.projects;
    }

    if (!projects || !projects.length) {
      projects = [];
      return;
    }

    projects = projects;
}

端点是http://127.0.0.1:8000/user/projects,它从postman工作(后端在本地运行)

dced5bon

dced5bon1#

因为你使用的是Vite,所以你应该使用import.meta.env而不是process.env来导入环境变量。所以你应该用下面的语句来设置基本url:baseURL: import.meta.env.VUE_APP_API_URL .
请参阅Vite documentation

sgtfey8w

sgtfey8w2#

process.env.VUE_APP_API_URL是访问已定义的env变量所需的代码。

import axios from 'axios';

// eslint-disable-next-line no-undef
const api = axios.create({ baseURL: process.env.VUE_APP_API_URL});

export default api;

相关问题