通常の vue 開発では、複数のページで同じフィールドを使用したり、Web ページのルート パスを使用したりすることがありますが、コードに直接記述するとメンテナンスが難しく、その後の変更を行う場合、多くのページを変更する必要があります。この記事では、.env ファイルを使用してグローバル変数を定義する方法について説明します。
1. .env ファイルとは何ですか?
vue プロジェクトでは、env はさまざまな環境に変数を保存できるグローバル構成ファイルです。vue-cli を使用してプロジェクトをビルドすると、デフォルトでルート ディレクトリに .env ファイルが作成されます。
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略modeの値は、 development (開発環境)、production (実稼働環境)、test (テスト環境) のいずれかであり、それらは対応するモードでのみロードされます。
2. .env ファイルを構成する
.env ファイルでグローバル変数を構成します。これは、次のようなキーと値のペアの形式で定義する必要があります。
VUE_APP_BAIDU_URL='www.baidu.com'また、変数名はVUE_APP_ で始まる必要があります。そうしないと、その後の変数取得で unknown が取得されます。
VUE_APP_TEST_SUCCESS='www.baidu.com' //正确
APP_TEST_SUCCESS='www.baidu.com' //错误
TEST_SUCCESS='www.baidu.com' //错误注: .env 環境ファイルは vue-cli-service コマンドを実行することによってロードされるため、環境ファイルが変更された場合はサービスを再起動する必要があります。
3. Vue はグローバル変数を取得します
変数 VUE_APP_BAIDU_URL='www.baidu.com' は .env ファイルに設定されます 。
vue では、process.env.VUE_APP_BAIDU_URLを使用するだけで取得できます。他のパッケージをインポートする必要がなく、非常に便利です。