序章
Webアプリでは、ほとんどの場合、URLを介してバックエンドAPIサーバーにアクセスする必要があります。 開発環境では、ローカルで作業している場合、このURLは次のようになります。 http://localhost:8080/api
. 実稼働環境では、プロジェクトがデプロイされている場合、このURLは次のようになります。 https://example.com/api
. 環境変数を使用すると、プロジェクトの現在の状態に応じて、このURLを自動的に変更できます。
Vue.jsを使用すると、次のファイルを介して環境変数を使用できます。 .env
ファイル拡張子。 これらのファイルは、環境に固有の情報(「開発」、「テスト」、「本番」など)を格納する役割を果たします。
この記事では、Vue CLI 3+および2を使用して、Vue.jsプロジェクトの開発モードと本番モードの間で個別の構成を操作する方法を学習します。
前提条件
この記事をフォローするには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
- 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
:
- npx @vue/cli create vue-cli-env-example
プロジェクトディレクトリに移動します。
- cd vue-cli-env-example
コードエディタを使用して、 .env
次のような値をファイルして追加します。
VUE_APP_ROOT_API=http://localhost/api
次に、コードエディタを使用して、 .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>
タグは以下を追加します:
<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—使用 .env
VueCLI2のファイル
VueCLI2は以前のバージョンの vue-cli
. Vue.jsプロジェクトを作成すると、次を使用できます dev.env.js
, test.env.js
、 と prod.env.js
.
ターミナルで、次のコマンドを使用して新しいVue.jsプロジェクトを作成します。 vue-cli
:
- 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
価値:
'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
価値:
'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>
タグは以下を追加します:
<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://www.example.com/api
それ以外の http://localhost/api
.
webpack template が提供する既製の構成を使用して、環境ごとに異なる変数を操作できます。 別のテンプレートを使用する場合は、同等の機能を見つけるか、dotenvなどのライブラリを使用して環境変数を管理してください。
結論
この記事では、VueCLI3以降および2でビルドされたプロジェクトで環境変数を使用する方法を学習しました。
現在および将来のプロジェクトでは、次を使用することをお勧めします @vue/cli
として前進する vue-cli
非推奨になりました。
Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。