Vue 開発環境と本番環境では異なる変数が設定されます-フロントエンドQ&A-php.cn

Vue 開発環境と本番環境では異なる変数が設定されます

王林

リリース： 2023-05-24 09:55:37

オリジナル

741 人が閲覧しました

Vue 開発では、異なる環境で異なる変数を設定することがよくあります。たとえば、開発環境では、一部のデバッグツールをオンにする必要がある場合があります。また、運用環境では、アプリケーションのパフォーマンスを向上させるために、これらのデバッグツールをオフにする必要があります。このとき、開発環境と本番環境で異なる変数を設定する必要があります。

以下では、Vue でさまざまな変数を設定する方法を紹介します。

Vue-Cli でのセットアップ

Vue-Cli は、アプリケーションの開発と構築に必要なすべてが組み込まれた Vue.js のスキャフォールディングツールです。したがって、Vue-Cli を使用してアプリケーションを開発する場合は、その構成ファイルに変数を設定できます。

まず、プロジェクトのルートディレクトリに .env. という名前のファイルを作成し、必要に応じて最後に環境変数の名前を追加する必要があります。たとえば、次のようにこのファイルに VUE_APP_TEST という名前の環境変数を追加しました。

VUE_APP_TEST=hello world

ログイン後にコピー

次に、この環境変数を使用する必要があるコンポーネントで、process を渡すことができます。 .env.VUE_APP_TEST を使用して、この環境変数の値を取得します。

Vue-Cli では、VUE_APP_ で始まるすべての変数が、NODE_ENV 変数が設定されている場合にのみ、自動的にアプリケーションに挿入されることに注意してください。 development または production の場合にのみ正しく動作します。

Webpack で設定

Vue-Cli を使用せず、Webpack パッケージ化ツールを使用する場合は、webpack.config.js で設定できます。 ファイルに環境変数を設定します。

まず、webpack.DefinePlugin を導入し、次のようにプラグインに環境変数を設定する必要があります。

const webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    new webpack.DefinePlugin({
      TEST: JSON.stringify('hello world')
    })
  ]
}

ログイン後にコピー

次に、環境変数コンポーネントでは、process.env.TEST を通じてこの環境変数の値を取得できます。

なお、Webpackでは環境変数を手動で設定する必要があり、環境ごとに設定する必要があるため、比較的面倒です。

Node.js での設定

Node.js で Vue アプリケーションを開発している場合は、サーバー側のコードで環境変数を設定できます。

サーバーが起動すると、以下に示すように、process.env オブジェクトを通じて環境変数を設定できます。

process.env.TEST = 'hello world';

ログイン後にコピー

その後、環境を使用する必要があるときに、変数コンポーネントでは、process.env.TEST を通じて環境変数の値を取得することもできます。

Nuxt.js を使用している場合は、.env. ファイルに環境変数を直接設定でき、Vue-Cli と同じくらい便利です。

概要

開発環境と本番環境が異なると、必要な変数設定が異なります。Vue-Cli を使用すると、設定ファイルに変数を簡単に設定できます。Webpack を使用すると、webpack で変数を設定できます。 config 変数は .js ファイルで設定されますが、Node.js ではサーバーコードで手動で設定する必要があります。

どの方法を使用する場合でも、特定のニーズに応じて設定する必要があることに注意してください。

以上がVue 開発環境と本番環境では異なる変数が設定されますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。