Как поставить обязательную проверку, заданы ли все переменные среды в приложении vue js

#javascript #vue.js #vuejs2 #environment-variables #frontend

Вопрос:

Как мы можем убедиться, что перед созданием приложения vue js заданы все значения переменных среды, указанные в .env.пример ?

Комментарии:

1. Это зависит от того, с помощью чего вы создаете приложение. Пожалуйста, также опишите процесс сборки.. Я предполагаю, что Vue CLI?

2. Да, с Vue CLI @PeterKrebs

Ответ №1:

Простым решением было бы написать сценарий оболочки, который импортирует .env и проверяет переменные среды.

Вы можете отредактировать package.json и добавить этот скрипт (давайте назовем его check-env.sh scripts разделом:

 {
  
  "scripts": {
    "serve": "./check-env.sh amp;amp; vue-cli-service serve",
    "build": "./check-env.sh amp;amp; vue-cli-service build",
    "dev": "./check-env.sh amp;amp; vue-cli-service build --mode development",
    "watch-dev": "./check-env.sh amp;amp; vue-cli-service build --watch --mode development",
    "watch": "./check-env.sh amp;amp; vue-cli-service build --watch --mode production",
    "lint": "./check-env.sh amp;amp; vue-cli-service lint"
  },
}
 

Это можно было бы сделать более элегантным, например, с помощью плагина Webpack, но он дает вам возможность включать и выключать его для вышеуказанных сценариев.

Вы можете добавить метод configureWebpack в свой vue.config.js и вместо этого сделать скрипт подходящим модулем, чтобы сделать его обязательным для каждой сборки.
Таким образом, вы можете импортировать его в свой vue.config.js и добавить вызов функции configureWebpack (), которая создает исключение, если переменные env не соответствуют ожиданиям.

 // vue.config.js

// Import your script along the other imports in this file...

module.exports = {
  configureWebpack: config => {
    // Call the check here and throw an exception. This should work.
    
    if (process.env.NODE_ENV === 'production') {
      // mutate config for production...
    } else {
      // mutate for development...
    }
  }
}