envフロントエンド環境変数の設定

前言
プロジェクトは開発環境、テスト環境、オンライン環境があります.毎回調整や包装の時に手動で各変数を変更するのは面倒くさいし、間違えやすいです.自動化方式で直接配置された異なる環境変数です.
ファイルの設定
プロジェクトのルートディレクトリにファイルを追加し、変数を設定します.
env.development(ローカル環境変数)

NODE_ENV = 'development'
VUE_APP_URL = 'http://dev.xxx.com'

env.production(オンライン環境変数)

NODE_ENV = 'production'
VUE_APP_URL = 'http://prod.xxx.com'

設定を開始
package.jsonにscriptsを配置する
ローカル運転

"serve": "vue-cli-service serve --mode development"

ローカル運転で、オンライン環境変数を使用します.

"serve:prod": "vue-cli-service serve --mode production"

環境変数に入る必要がある場合は、cross-env NODE_ENV=developmentを追加してもよく、cross-envは、mac互換のために使用される.

"serve:prod": "cross-env NODE_ENV=development vue-cli-service serve --mode production"

包装する

"build": "vue-cli-service build --mode production"

プロジェクトで使用

console.log(process.env.VUE_APP_URL)