Vue3 Pinia中Axios读取环境API URL错误导致请求404问题

问题背景 #

本地开发时.env配置正常：

VUE_APP_API_URL=http://localhost:5038
VUE_APP_UI_URL=http://localhost:8080

部署到Render平台后，配置的环境变量为：

VUE_APP_API_URL=https://my-app-ui.onrender.com
VUE_APP_UI_URL=https://my-app-api.onrender.com

部署后出现请求路径错误：

https://my-app-ui.onrender.com/my-app-api.onrender.com/user/exists/username/null 404 (Not Found)

相关Pinia Store代码示例：

import { defineStore } from 'pinia';
import { useUserStore } from '@/stores';
import axios from 'axios';

const baseUrl = process.env.VUE_APP_API_URL + "/gift";

export const useGiftStore = defineStore({
    id: 'gift',
    state: () => ({
        gifts: null
    }),
    actions: {
        async create(obj) {
            let payload = obj;
            if (!obj.userId) {
                const userStore = useUserStore();
                payload.userId = userStore.user._id;
            }
            try {
                let gift = await axios.post(`${baseUrl}`, payload);
                return gift.data;
            } catch (error) {
                console.error("Error: ", error);               
            }
        },
    }
});

问题原因 #

1. 环境变量值配置错误：把API地址和UI地址搞反了，VUE_APP_API_URL应该指向后端API服务地址https://my-app-api.onrender.com，而非前端UI地址。
2. URL拼接逻辑不严谨：直接用字符串拼接路径，若基址URL结尾无斜杠，容易出现路径拼接错误（本次核心问题是变量值搞反）。

解决方案 #

1. 修正Render平台的环境变量配置 #

将两个变量的值互换，确保API地址指向后端服务：

VUE_APP_API_URL=https://my-app-api.onrender.com
VUE_APP_UI_URL=https://my-app-ui.onrender.com

2. 优化URL拼接逻辑（可选但推荐） #

为避免后续因URL斜杠问题导致的拼接错误，推荐以下两种优化方式：

方式A：使用new URL安全拼接路径

利用浏览器原生URL对象处理路径拼接，自动处理斜杠问题：

import { defineStore } from 'pinia';
import { useUserStore } from '@/stores';
import axios from 'axios';

// 用URL对象安全生成完整路径
const apiBase = process.env.VUE_APP_API_URL;
const baseUrl = new URL('/gift', apiBase).href;

export const useGiftStore = defineStore({
    id: 'gift',
    state: () => ({
        gifts: null
    }),
    actions: {
        async create(obj) {
            let payload = obj;
            if (!obj.userId) {
                const userStore = useUserStore();
                payload.userId = userStore.user._id;
            }
            try {
                let gift = await axios.post(baseUrl, payload);
                return gift.data;
            } catch (error) {
                console.error("Error: ", error);               
            }
        },
    }
});

方式B：封装Axios实例统一管理基址

创建全局Axios实例，统一配置API基址，避免每个Store重复处理：

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

const axiosInstance = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
});

export default axiosInstance;

在Pinia Store中使用该实例：

import { defineStore } from 'pinia';
import { useUserStore } from '@/stores';
import axiosInstance from '@/utils/axios';

export const useGiftStore = defineStore({
    id: 'gift',
    state: () => ({
        gifts: null
    }),
    actions: {
        async create(obj) {
            let payload = obj;
            if (!obj.userId) {
                const userStore = useUserStore();
                payload.userId = userStore.user._id;
            }
            try {
                // 直接传相对路径，Axios自动拼接baseURL
                let gift = await axiosInstance.post('/gift', payload);
                return gift.data;
            } catch (error) {
                console.error("Error: ", error);               
            }
        },
    }
});

验证 #

修改完成后重新部署到Render，检查请求路径，应该变为https://my-app-api.onrender.com/gift这类正确地址，404错误会消失。

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