vueプロジェクト起動後に開くブラウザの設定方法

Vue プロジェクトの開発プロセスでは、通常、webpack-dev-server または Vue-CLI によって提供されるサービスを使用して、ローカル開発サーバーを起動します。これらの開発サーバーが起動すると、自動的にデフォルトのブラウザが開き、プロジェクトのルート ディレクトリのホームページにアクセスします。ただし、開発中に Chrome をデフォルトのブラウザとして使用する場合など、場合によっては、起動時に指定したブラウザを開く必要がある場合があります。

それでは、Vue プロジェクトの開始後に指定したブラウザーを開くように設定するにはどうすればよいでしょうか?これは実際には非常に簡単です。この記事では、この目標を達成するための 2 つの方法を紹介します。

1. vue-cli に付属の設定ファイルを使用します

Vue-CLI バージョン 3.x 以降のプロジェクトでは、プロジェクト ルートで vue を見つけることができます。 directory .config.js 構成ファイル。これにより、デフォルト構成をオーバーライドして拡張できます。次の設定をファイルに追加することで、起動時にブラウザを設定できます:

module.exports = {
  devServer: {
    open: 'chrome', // 设置启动时的浏览器
    port: 8080 // 设置端口号
  }
}

ここでは、開いている設定項目を chrome に設定し、起動時に Chrome ブラウザが使用されることを示します。ポート番号やその他の関連する devServer 構成項目も設定できます。変更を保存して開発サーバーを起動すると、Chrome ブラウザが自動的に開き、プロジェクトのルート ディレクトリのホームページにアクセスします。

2. cross-env と open コマンドを使用する

webpack-dev-server を使用して Vue-CLI 2.x または他のプロジェクトで起動時間を設定する必要がある場合ブラウザでは、cross-env コマンドと open コマンドを使用できます。まず、プロジェクトに環境間の依存関係をインストールする必要があります:

npm install cross-env --save-dev

次に、package.json ファイルに次のコマンドを追加します:

{
  "scripts": {
    "dev": "cross-env BROWSER=chrome webpack-dev-server --open --port 8080"
  }
}

ここで、BROWSER 構成項目を設定します。 chrome に変更し、起動時に Chrome ブラウザを使用することを示します。また、 --open および --port オプションを使用して、ブラウザが自動的に開くように設定し、ポート番号も設定しました。 npm run dev コマンドを実行して開発サーバーを起動すると、Chrome ブラウザが自動的に開き、プロジェクトのルート ディレクトリのホームページにアクセスします。

概要

この記事では、起動後に指定したブラウザーを開くように Vue プロジェクトをセットアップする 2 つの方法を紹介します。vue-cli に付属の設定ファイルを使用する方法と、cross-env コマンドと open コマンドを使用する方法です。 。どの方法を使用する場合でも、開発中にお気に入りのブラウザを使用してプレビューやデバッグを行うことができるので便利です。

以上がvueプロジェクト起動後に開くブラウザの設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。