如何为两个不同的生产构建使用不同的 API 端点？答案

【问题标题】：How to use different API endpoints for two different production builds?如何为两个不同的生产构建使用不同的 API 端点？
【发布时间】：2019-01-16 07:15:23
【问题描述】：

我需要生成两个生产版本。一个用于分期，一个用于最终制作。我使用vue-cli-service build 创建一个构建。我需要的是制作两个 npm 脚本，它们将针对不同的条件使用不同的 API 端点。

下面是我导出 api 端点的文件。 src/config/index.js

import dev from "./dev.env.js";
import prod from "./prod.env.js";
let api
if (process.env.NODE_ENV === "production") {
  api = dev
}
if (process.env.NODE_ENV === "finalprod") {
  api = prod
}
export default api;

在package.json 脚本中我有

"build": "vue-cli-service build",
"buildprod": "NODE_ENV=finalprod vue-cli-service build",

这似乎解决了问题。但问题在于，当环境更改为finalprod 时，build 命令不会生成生产构建。

我也检查了this url，但无法从中得到我的解决方案。

注意：

我没有 CI/CD 设置，所以我在服务器中没有任何环境。我只是在本地创建一个构建并使用ftp 将构建上传到提供静态文件的服务器。
我使用命令vue create project-name启动了项目

【问题讨论】：

标签： vue.js production-environment vue-cli-3

【解决方案1】：

这是您可以尝试解决的一种解决方案。

在你的 vue 项目根目录下，创建一个 env 文件：.env.finalprod.local

在你的 env 文件中，你应该声明 NODE_ENV=production 以便它将以生产模式构建。

如果要指定其他自定义环境变量，请确保以VUE_APP_ 为前缀，否则在构建时将被忽略。

它应该是这样的：

NODE_ENV=production
VUE_APP_API_ENDPOINT=YOUR_API_ENDPOINT_HERE

这意味着您必须为其他环境定义单独的 env 文件，例如 .env.development.local 和 .env.production.local 如果它们使用不同的 API 端点。

修改您的src/config/index.js，类似于以下代码

let api = process.env.VUE_APP_API_ENDPOINT;
export default api;

在您的 package.json 中，将您的脚本更改为：

"buildprod": "vue-cli-service --mode finalprod"

这将在暂存模式下构建一个生产应用程序，如果存在 .env、.env.finalprod 或 .env.finalprod.local，则将使用它们。

请注意，如果您有此脚本 "buildprod": "vue-cli-service --mode finalprod"，您还必须使用 .finalprod 命名您的 .env 文件，例如 .env.finalprod.local，否则 cli 找不到它并且不会在生产模式下构建您的应用程序.

【讨论】：