Vue 環境変数configuration-process.env

フレームワークを利用する場合vue、ローカルで開発する環境である開発環境と、オンラインで公開する環境である本番環境の2つの環境を利用することが多いです。

通常、開発には本番環境を使用しますが、オンラインで公開する場合は、環境をオンラインに切り替える必要があります。手動で切り替えることもできますが、忘れがちなので、実行コマンドを設定することで自動的に環境を切り替えることができます。

以下から始めてください:

環境構成の実装原則

実装原理は、node.js最上位process.envオブジェクトの（プロセス環境、ユーザー環境情報を含むオブジェクトを返す）属性を使用して、各環境の設定ファイルに従って環境を区別し、切り替えることです。

具体例

1. 依存関係をインストールする

npm install process

2. 2つ`.env.dev` の`.env.prod`ファイルを作成します

ファイルはルートディレクトリの下に作成する必要があることに注意してください

.env.devファイルの内容は次のとおりです。

NODE_ENV = 'development'
VUE_APP_TITLE = 'development'
/* 请求接口地址 */
VUE_APP_INTERFACE_URL="https://xxx"
/* proxy代理地址 */
VUE_APP_PROXYURL='http://xxx'

.env.prodファイルの内容は次のとおりです。

NODE_ENV='production'
VUE_APP_TITLE='prod'
/* 请求接口地址 */
VUE_APP_INTERFACE="https://xxx"

必要に応じて.env.test、次の内容を含むテスト環境ファイルを追加できます。

NODE_ENV='production'
VUE_APP_TITLE='test'
/* 请求接口地址 */
VUE_APP_INTERFACE="https://xxx"

3. プロジェクト開始時のデフォルト環境を設定する

プロジェクト起動コマンド後に必要な環境を変更するだけで済みます（例：npm run devに--mode dev変更する--mode prodと開発環境になります）

package.json内容の一部は以下の通りです。

"scripts":{
	"dev":"vue-cli-service serve --mode dev",//以.env.dev中的接口地址本地运行
	"prod":"vue-cli-service serve --mode prod",//以.env.pro中的接口地址本地运行
	"build": "vue-cli-service build",//以.env.pro中的接口地址打正式包
    "build:test": "vue-cli-service build --mode test"//以.env.test中的接口地址打测试包
}

4. 環境が正しく構成されているかどうかを確認します

現在の環境をファイルに出力するmain.jsと、出力は成功します。
console.log(process.env.NODE_ENV)