Vue中如何动态设置API URL路径？

问题描述 #

使用@vue/cli 5.0.8时，动态设置API URL路径遇到问题，要么出现404错误，要么页面空白。目前暂时硬编码URL，寻求动态设置的解决方案。

已尝试操作

1. 曾通过旧的dev.env.js配置ROOT_API，现已弃用该方式
2. 在项目根目录和前端目录同时放置了.env文件，内容如下：

NODE_ENV=development
PORT=8081
VUE_APP_API_BASE_URL=http://localhost:8081/api

3. 代码中尝试动态拼接URL：

const API_URL = `${process.env.VUE_APP_API_BASE_URL}/auth`;

但仍出现404错误；此前还试过const API_URL = process.env.ROOT_API/test;，同样无效。

原始代码片段

import axios from 'axios';

const API_URL = 'http://localhost:8081/api/auth/';

class AuthService {
  login(user) {
    return axios
      .post(API_URL + 'signin', {
        username: user.username,
        password: user.password
      })
      .then(response => {
        if (response.data.accessToken) {
          localStorage.setItem('user', JSON.stringify(response.data));
        }
        return response.data;
      });
  }
}

解决方案 #

1. 规范环境变量文件的放置与命名

• 仅在项目根目录放置环境变量文件，不要同时在前端目录存放，避免配置冲突
• 开发环境使用.env.development，生产环境使用.env.production，默认.env会被所有环境加载，但优先级低于环境特定文件

2. 正确配置环境变量格式

变量名必须以VUE_APP_开头，Vue CLI才会将其注入到应用中，注意不要给变量值加引号：

# .env.development
NODE_ENV=development
PORT=8081
VUE_APP_API_BASE_URL=http://localhost:8081/api

3. 代码中正确调用并验证

• 修改.env文件后必须重启开发服务器，否则变量不会生效
• 在代码中调用变量后，可在浏览器控制台打印process.env.VUE_APP_API_BASE_URL，确认变量是否正确注入
• 核对后端API的实际路径，确保http://localhost:8081/api/auth/signin确实提供服务

4. Heroku部署时的环境变量配置

部署到Heroku时无需提交.env文件，直接在平台后台配置：

• 进入Heroku项目的Settings -> Config Vars
• 添加键为VUE_APP_API_BASE_URL，值为生产环境API地址（例如https://your-heroku-app.herokuapp.com/api）

5. 进阶：统一管理API路径（可选）

在src目录下创建config/api.js，统一管理所有API地址，便于维护：

const baseUrl = process.env.VUE_APP_API_BASE_URL;

export const API_URL = {
  auth: `${baseUrl}/auth`,
  test: `${baseUrl}/test`
};

在AuthService中导入使用：

import axios from 'axios';
import { API_URL } from '@/config/api';

class AuthService {
  login(user) {
    return axios
      .post(`${API_URL.auth}/signin`, {
        username: user.username,
        password: user.password
      })
      .then(response => {
        if (response.data.accessToken) {
          localStorage.setItem('user', JSON.stringify(response.data));
        }
        return response.data;
      });
  }
}

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