Как использовать разные конечные точки API для двух разных сборок?

Question

Мне нужно создать две производственные сборки. Один для постановки и один для окончательного производства. Я использую 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 не генерирует production build.

Также я проверил этот URL , но не смог получить от этого свое решение.

Примечание:

1. У меня нет настроек CI / CD, поэтому у меня нет env на сервере. Я просто создаю сборку на своем локальном компьютере и использую ftp для загрузки сборки на сервер, который обслуживает статические файлы.
2. Я инициировал проект с помощью команды vue create project-name

Answer 1

Вот одно решение, которое вы можете попробовать решить.

1. В корне проекта vue создайте файл env: .env.finalprod.local

Внутри вашегоenv file, вы должны объявить 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", вы должны также назвать свой файл .env, используя .finalprod, например, .env.finalprod.localв противном случае клиент не сможет найти его и не будет создавать приложение в рабочем режиме.