Vue3 でドメイン間で devServer パラメータを設定する方法は何ですか?

devServer は、開発サーバーを構成するために使用されるオプション オブジェクトです。プロキシ、ポート番号、HTTPS など、サーバーのさまざまなオプションを構成するために使用できます。

以下は、よく使用される devServer パラメータと設定の一部です:

• port: 開発環境のポート番号を指定します。サーバー、デフォルトは 8080 です。

• host: 開発サーバーのホスト名を指定します。デフォルトは localhost です。

• https: HTTPS を有効にするには、Object 型パラメータを渡して HTTPS オプションを構成します。

• #open: ブラウザを自動的に開きます。デフォルトは false です。 String 型パラメータを渡してブラウザの名前を指定できます。

• proxy: プロキシを構成するために使用されます。 Object タイプのパラメータを渡して、プロキシ オプションを構成できます。

• #hot: ホット リロードを有効にします。デフォルトは true です。

• compress: gzip 圧縮を有効にします。

• historyApiFallback: HTML5 履歴モード ルーティングを有効にします。ブラウザがアクセスしたパスが存在しない場合、404 ページの代わりに index.html ファイルが返されます。

• publicPath: リソースのパブリック パスを指定します。相対パスまたは絶対パスを使用できます。

• quize: すべての出力情報を無効にします。

• clientLogLevel: ブラウザ コンソールに表示されるログ レベルを指定します。デフォルトは info です。

• overlay: ブラウザにコンパイル エラーを表示します。

• watchOptions: 監視ファイルを構成するためのオプション。

• contentBase: 静的ファイルのディレクトリを指定します。デフォルトはプロジェクトのルート ディレクトリです。

• before および after: サーバーの起動前または起動後にカスタム コードを実行します。

次に、devServer の構成例を示します。

// vue.config.js
module.exports = {
  devServer: {
    port: 8080,
    host: 'localhost',
    https: false,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    },
    hot: true,
    compress: true,
    historyApiFallback: true,
    publicPath: '/',
    quiet: true,
    clientLogLevel: 'warning',
    overlay: true,
    watchOptions: {
      poll: false
    },
    contentBase: './public',
    before: function(app) {
      // 在服务器启动之前执行自定义代码
    },
    after: function(app) {
      // 在服务器启动之后执行自定义代码
    }
  }
};

この例では、次の構成を作成しました。

• 開発サーバーのポート番号を 8080 に設定します。

• 開発サーバーのホスト名を localhost に設定します。

• HTTPS を無効にします。

• ブラウザを自動的に開きます。

• /api で始まるすべてのリクエストを http://localhost:3000 にプロキシするようにプロキシを構成します。

• ホットリロードを有効にします。

• gzip 圧縮を有効にします。

• HTML5 履歴モード ルーティングを有効にします。

• 指定されたリソースのパブリック パスはルート ディレクトリです。

• #すべての出力情報を無効にします。

• ログ レベルを

  warning に設定します。

• コンパイル エラーをブラウザに表示します。

• ファイル監視のオプションはデフォルト値に設定されています。

• 静的ファイルのディレクトリを

  ./public として指定します。

• サーバーの起動前後にカスタム コードを実行します。

ニーズに応じて

devServer を構成できます。この例は単なる開始点であり、ニーズに合わせて変更および拡張できます。

以上がVue3 でドメイン間で devServer パラメータを設定する方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。