英文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 byvue-cli-service serve
test
is used byvue-cli-service test:unit
production
is used byvue-cli-service build
andvue-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
, yourNODE_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 setNODE_ENV
when runningvue-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 withwebpack.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 ofvue-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 ofVUE_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 thepublicPath
option invue.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 withVUE_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.