Vue.jsで環境変数を使用する方法

提供：Dev Guides
移動先:案内、検索

序章

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

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

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

前提条件

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

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

ステップ1— VueCLI3+で.envファイルを使用する

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

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

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

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

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変数を作成した後、グローバルprocess.envオブジェクトを介してVueのどこでも使用できます。 

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>

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

npm run serve

このコマンドは.env値を使用し、コンソールログにhttp://localhost/apiと表示されます。

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

npm run serve -- --mode=production

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

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

vue-cli-service serve --mode=production

このコマンドは.env.production値を使用し、コンソールログにhttp://www.example.com/apiと表示されます。

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

ステップ2— VueCLI2で.envファイルを使用する

Vue CLI 2は、vue-cliの以前のバージョンです。 Vue.jsプロジェクトを作成すると、dev.env.js、test.env.js、およびprod.env.jsを使用できるようになります。

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

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

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

これらのファイルは、開発モードと本番モードで使用されます。 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変数を作成した後、グローバルprocess.envオブジェクトを介してVueのどこでも使用できます。 

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>

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

npm run dev

このコマンドはdev.env.js値を使用し、コンソールログにhttp://localhost/apiと表示されます。

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

npm run build

このコマンドは、prod.env.js値を使用して、distディレクトリにアプリケーションを生成します。 このディレクトリに移動し、process.env.ROOT_APIの値がhttp://localhost/apiではなくhttp://www.example.com/apiを使用していることを確認します。

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

結論

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

現在および将来のプロジェクトでは、vue-cliが廃止されたため、@vue/cliを使用することをお勧めします。

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

「https://www.finddevguides.com/index.php?title=Vue.jsで環境変数を使用する方法&oldid=102388」から取得
Powered by MediaWiki