首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Vue Vite SPA应用程序没有与Laravel http://localhost:5173/user/projects 404通信(未找到)

Vue Vite SPA应用程序没有与Laravel http://localhost:5173/user/projects 404通信(未找到)
EN

Stack Overflow用户
提问于 2022-09-05 14:08:32
回答 2查看 47关注 0票数 0

我试图从端点中获取一个列表,但它会抛出错误404,它可以从Postman获得,但在应用程序中不起作用。我在应用程序根文件夹中手动创建了.env文件。

错误消息显示GET http://localhost:5173/user/projects 404 (Not Found)

.env:

代码语言:javascript
运行
复制
VUE_APP_API_URL=http://localhost:8000
VUE_APP_PUBLIC_PATH=/

src/services/api.js:

代码语言:javascript
运行
复制
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;

vite.config.ts:

代码语言:javascript
运行
复制
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,
  },
})

src/pages/Projects/index.vue:

代码语言:javascript
运行
复制
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 (后端在本地运行)工作。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-09-05 15:37:45

由于您使用的是Vite,所以应该使用import.meta.env而不是process.env来导入环境变量。所以您应该用:baseURL: import.meta.env.VUE_APP_API_URL设置基url。

Vite文档

票数 0
EN

Stack Overflow用户

发布于 2022-09-05 14:14:49

process.env.VUE_APP_API_URL是访问您定义的env变量所需的。

代码语言:javascript
运行
复制
import axios from 'axios';

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

export default api;
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73610707

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档