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

Question

Edit (2):我现在只对url进行硬编码。仍然在寻找动态分配的解决方案!

编辑:我试过了索尼给我的建议。然而，它仍然不工作(我得到一个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，要么是一个空白的屏幕。

如果有帮助，这里有一个代码片段。

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来自我在它不起作用后扔掉的一个文件。上述文件如下:

dev.env.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

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

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/"

并使用env变量在任何地方，像这样使用它们-

var root_api = process.env.VUE_APP_ROOT_API

如果你将应用部署到Heroku，你也可以使用同样的方法。这里是完整的指南。