序章

Webアプリでは、ほとんどの場合、URLを介してバックエンドAPIサーバーにアクセスする必要があります。 開発環境では、ローカルで作業している場合、このURLは次のようになります。 http://localhost:8080/api. 実稼働環境では、プロジェクトがデプロイされている場合、このURLは次のようになります。 https://example.com/api. 環境変数を使用すると、プロジェクトの現在の状態に応じて、このURLを自動的に変更できます。

Vue.jsを使用すると、次のファイルを介して環境変数を使用できます。 .env ファイル拡張子。 これらのファイルは、環境に固有の情報（「開発」、「テスト」、「本番」など）を格納する役割を果たします。

この記事では、Vue CLI 3+および2を使用して、Vue.jsプロジェクトの開発モードと本番モードの間で個別の構成を操作する方法を学習します。

前提条件

この記事をフォローするには、次のものが必要です。

このチュートリアルは、Nodev15.1.0で検証されました。 npm v6.14.8、Vue.js v2.6.12、TypeScript v3.9.3、 @vue/cli v4.5.8、および vue-cli v2.9.6。

ステップ1—使用 .env VueCLI3以降のファイル

VueCLI4は現在のバージョンです @vue/cli. Vue.jsプロジェクトを作成したら、追加できます .env と .env.production ファイル。

ターミナルで、次のコマンドを使用して新しいVue.jsプロジェクトを作成します。 @vue/cli:

  1. npx @vue/cli create vue-cli-env-example

プロジェクトディレクトリに移動します。

  1. cd vue-cli-env-example

コードエディタを使用して、 .env 次のような値をファイルして追加します。

.env
VUE_APP_ROOT_API=http://localhost/api

次に、コードエディタを使用して、 .env.production 次のような値をファイルして追加します。

.env.production
VUE_APP_ROOT_API=http://www.example.com/api

注： VUE_APP_ ここではプレフィックスが重要であり、そのプレフィックスのない変数はアプリで使用できません。

作成後 VUE_APP_ROOT_API 変数、グローバルを通じてVueのどこでも使用できます process.env 物体：

process.env.VUE_APP_ROOT_API

たとえば、 HelloWorld.vue ファイルと <script> タグは以下を追加します：

src / components / HelloWorld.vue
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted() {
    console.log(process.env.VUE_APP_ROOT_API)
  },
}
</script>

開発値を使用してアプリケーションをコンパイルする場合：

  1. npm run serve

このコマンドは、 .env 値とコンソールログが表示されます： http://localhost/api.

本番値を使用してアプリケーションをコンパイルする場合：

  1. npm run serve -- --mode=production

注：ここでダブルハイフンを使用してフラグを渡すことが重要です。 npm に vue-cli-service.

次の代替コマンドを使用することもできます。

  1. vue-cli-service serve --mode=production

このコマンドは、 .env.production 値とコンソールログが表示されます： http://www.example.com/api.

デフォルトでは、Vue CLIは「開発」、「テスト」、「本番」の3つのモードをサポートします。 Vue CLI 3での環境変数の使用の詳細については、公式ドキュメントを参照してください。

ステップ2—使用 .env VueCLI2のファイル

VueCLI2は以前のバージョンの vue-cli. Vue.jsプロジェクトを作成すると、次を使用できます dev.env.js, test.env.js、 と prod.env.js.

ターミナルで、次のコマンドを使用して新しいVue.jsプロジェクトを作成します。 vue-cli:

  1. npx vue-cli init webpack vue-cli-two-env-example

には2つのファイルがあります config ディレクトリ： dev.env.js と prod.env.js.

これらのファイルは、開発モードと本番モードで使用されます。 を介してアプリケーションを実行している場合 npm run dev コマンド、 dev.env.js ファイルが使用されます。 プロジェクトを本番用にコンパイルする場合 npm run build コマンド、 prod.env.js 代わりにファイルが使用されます。

開ける dev.env.js コードエディタで追加し、 ROOT_API 価値：

config / dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ROOT_API: '"http://localhost/api"'
})

次に、開く prod.env.js コードエディタで追加し、 ROOT_API 価値：

config / prod.env.js
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ROOT_API: '"http://www.example.com/api"'
}

作成後 ROOT_API 変数、グローバルを通じてVueのどこでも使用できます process.env 物体：

process.env.ROOT_API

たとえば、 HelloWorld.vue ファイルと <script> タグは以下を追加します：

src / components / HelloWorld.vue
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    console.log(process.env.ROOT_API)
  },
}
</script>

次のコマンドを使用してアプリケーションをコンパイルする場合：

  1. npm run dev

このコマンドは、 dev.env.js 値とコンソールログが表示されます： http://localhost/api.

次のコマンドを使用してアプリケーションをコンパイルする場合：

  1. npm run build

このコマンドは、 prod.env.js 値を設定し、アプリケーションを生成します dist ディレクトリ。 このディレクトリに移動して、 process.env.ROOT_API 値の使用 http://www.example.com/api それ以外の http://localhost/api.

webpack template が提供する既製の構成を使用して、環境ごとに異なる変数を操作できます。 別のテンプレートを使用する場合は、同等の機能を見つけるか、dotenvなどのライブラリを使用して環境変数を管理してください。

結論

この記事では、VueCLI3以降および2でビルドされたプロジェクトで環境変数を使用する方法を学習しました。

現在および将来のプロジェクトでは、次を使用することをお勧めします @vue/cli として前進する vue-cli 非推奨になりました。

Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。