如何在 Vue 中动态设置 api url 路径？

Question

编辑：我已经尝试过 Soni 的建议。但是，它仍然无法正常工作（我收到 404 错误）。

现在我的 .env 文件（它存在于我的项目的根目录和我的前端目录中）：

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

我的代码：

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

下面的文字是旧的。 （我不会编辑它。）

标题或多或少说明了一切。我正在使用 @vue/cli 5.0.8 并且在弄清楚它时遇到了一些麻烦。我得到 404 或空白屏幕。

如果有帮助，这里有一个代码 sn-p。

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;
      });
  }
}

在当地，它是

const API_URL = 'http://localhost:8081/api/test/'

我试过

const API_URL = process.env.ROOT_API/test;

但是没有骰子。我没有弄乱制作一个 .env.production 文件，因为据我所知，作为一个新手，.env 文件不应该被推送到 Github 上，我计划将它部署在 Heroku 上，它提供了它的拥有.env文件。 ROOT_API 来自我在它不起作用后扔掉的文件。该文件如下。

开发环境.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require ('./prod.env')

module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    ROOT_API: '"http://localhost/api"'

// There was a prod.env.js too, but I won't bother to post it. 
})

感谢任何帮助。

Answer 1

根据doc，一个好方法是根据环境创建文件，比如-

build.env.local (for the local environment)
build.env.test (for test environment)
build.env.production (for production environment)

并且可以像这样设置根据环境的不同端点 -

// build.env.local
VUE_APP_ROOT_API="http://localhost:8081/api/auth/"

// build.env.test
VUE_APP_ROOT_API="https://<test-domain>/api/auth/"

// build.env.production
VUE_APP_ROOT_API="https://<production-domain>/api/auth/"

并使用那些环境变量在任何地方，像这样使用它们-

var root_api = process.env.VUE_APP_ROOT_API

如果将应用程序部署到 Heroku，则可以使用相同的方式。这是完整的guide。