Vue.js

Vue CLIマニュアルの環境設定の日本語訳

  /

英文URL：https://cli.vuejs.org/guide/mode-and-env.html#modes

Modes and Environment Variables

# Modes

Mode is an important concept in Vue CLI projects. By default, there are three modes:

  • development is used by vue-cli-service serve
  • test is used by vue-cli-service test:unit
  • production is used by vue-cli-service build and vue-cli-service test:e2e

You can overwrite the default mode used for a command by passing the --mode option flag.–modeオプションフラグを渡すことで、コマンドに使用されるデフォルトモードを上書きできます。

For example, if you want to use development variables in the build command:

vue-cli-service build --mode development

When running vue-cli-service, environment variables are loaded from all corresponding files.vue-cli-serviceを実行すると、対応するすべてのファイルから環境変数がロードされます。

If they don’t contain a NODE_ENV variable, it will be set accordingly.NODE_ENV変数が含まれていない場合、それに応じて設定されます。

For example, NODE_ENV will be set to "production" in production mode, "test" in test mode, and defaults to "development" otherwise.たとえば、NODE_ENVは、プロダクションモードでは「プロダクション」に設定され、テストモードでは「テスト」に設定され、それ以外の場合はデフォルトで「開発」に設定されます。

Then NODE_ENV will determine the primary mode your app is running in – development, production or test – and consequently, what kind of webpack config will be created.NODE_ENVは、アプリが実行されているプラ​​イマリモード（開発、本番、またはテスト）を決定し、その結果、どの種類のwebpack構成が作成されるかを決定します

With NODE_ENV set to “test” for example, Vue CLI creates a webpack config that is intended to be used and optimized for unit tests.たとえば、NODE_ENVを「test」に設定すると、Vue CLIは、ユニットテスト用に使用および最適化することを目的としたwebpack構成を作成します

It doesn’t process images and other assets that are unnecessary for unit tests.単体テストに不要な画像やその他のアセットは処理しません。

Similarly, NODE_ENV=development creates a webpack configuration which enables HMR, doesn’t hash assets or create vendor bundles in order to allow for fast re-builds when running a dev server.同様に、NODE_ENV = developmentは、HMRを有効にするwebpack構成を作成します。開発サーバーを実行するときに高速再構築を可能にするために、アセットをハッシュしたり、ベンダーバンドルを作成したりしません。

When you are running vue-cli-service build, your NODE_ENV should always be set to “production” to obtain an app ready for deployment, regardless of the environment you’re deploying to.vue-cli-serviceビルドを実行しているときは、デプロイ先の環境に関係なく、NODE_ENVを常に「プロダクション」に設定して、デプロイ可能なアプリを取得する必要があります。

NODE_ENV

If you have a default NODE_ENV in your environment, you should either remove it or explicitly set NODE_ENV when running vue-cli-service commands.環境にデフォルトのNODE_ENVがある場合は、vue-cli-serviceコマンドを実行するときにそれを削除するか、NODE_ENVを明示的に設定する必要があります。

# Environment Variables

You can specify env variables by placing the following files in your project root:プロジェクトルートに次のファイルを配置することにより、env変数を指定できます

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

An env file simply contains key=value pairs of environment variables:envファイルには、環境変数のkey = valueペアが含まれています。

FOO=bar
VUE_APP_SECRET=secret

Note that only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin.VUE_APP_で始まる変数のみがwebpack.DefinePluginを使用してクライアントバンドルに静的に埋め込まれることに注意してください。

For more detailed env parsing rules, please refer to the documentation of dotenv

. We also use dotenv-expand

for variable expansion (available in Vue CLI 3.5+).

Loaded variables will become available to all vue-cli-service commands, plugins and dependencies.ロードされた変数は、すべてのvue-cli-serviceコマンド、プラグイン、および依存関係で使用可能になります

Env Loading Priorities

An env file for a specific mode (e.g. .env.production) will take higher priority than a generic one (e.g. .env).特定のモード（例：.env.production）のenvファイルは、一般的なモード（例：.env）よりも高い優先度を持ちます。

In addition, environment variables that already exist when Vue CLI is executed have the highest priority and will not be overwritten by .env files.さらに、Vue CLIの実行時に既に存在する環境変数が最も高い優先度を持ち、.envファイルによって上書きされません。

.env files are loaded at the start of vue-cli-service. Restart the service after making changes..envファイルは、vue-cli-serviceの開始時にロードされます。変更を行った後、サービスを再起動します。

# Example: Staging Mode

Assuming we have an app with the following .env file:

VUE_APP_TITLE=My App

And the following .env.staging file:

NODE_ENV=production
VUE_APP_TITLE=My App (staging)
  • vue-cli-service build builds a production app, loading .env, .env.production and .env.production.local if they are present;
  • vue-cli-service build --mode staging builds a production app in staging mode, using .env, .env.staging and .env.staging.local if they are present.

In both cases, the app is built as a production app because of the NODE_ENV, but in the staging version, process.env.VUE_APP_TITLE is overwritten with a different value.

# Using Env Variables in Client-side Code

You can access env variables in your application code:

console.log(process.env.VUE_APP_SECRET)

During build, process.env.VUE_APP_SECRET will be replaced by the corresponding value. In the case of VUE_APP_SECRET=secret, it will be replaced by "secret".ビルド中に、process.env.VUE_APP_SECRETは対応する値に置き換えられます。 VUE_APP_SECRET = secretの場合、「secret」に置き換えられます。

In addition to VUE_APP_* variables, there are also two special variables that will always be available in your app code:VUE_APP_ *変数に加えて、アプリコードで常に使用できる2つの特別な変数もあります。

  • NODE_ENV – this will be one of "development", "production" or "test" depending on the mode the app is running in.NODE_ENV-これは、アプリが実行されているモードに応じて、「開発」、「生産」、または「テスト」のいずれかになります。
  • BASE_URL – this corresponds to the publicPath option in vue.config.js and is the base path your app is deployed at. 
    BASE_URL-これはvue.config.jsのpublicPathオプションに対応し、アプリがデプロイされるベースパスです。

All resolved env variables will be available inside public/index.html as discussed in HTML – Interpolation.

TIP

You can have computed env vars in your vue.config.js file. They still need to be prefixed with VUE_APP_.vue.config.jsファイルでenv変数を計算できます。それでも、VUE_APP_をプレフィックスとして付ける必要があります。

This is useful for version info

process.env.VUE_APP_VERSION = require('./package.json').version

module.exports = {
  // config
}

# Local Only Variables

Sometimes you might have env variables that should not be committed into the codebase, especially if your project is hosted in a public repository. In that case you should use an .env.local file instead. Local env files are ignored in .gitignore by default.特にプロジェクトがパブリックリポジトリでホストされている場合、コードベースにコミットしてはならないenv変数がある場合があります。その場合は、代わりに.env.localファイルを使用する必要があります。ローカルenvファイルは、デフォルトで.gitignoreで無視されます。

.local can also be appended to mode-specific env files, for example .env.development.local will be loaded during development, and is ignored by git.

 

 

RELATED POST