Vue.jsでビルドディレクトリを指定する方法


ビルドディレクトリを指定するには、以下の方法があります。

  1. vue.config.jsファイルを使用する方法:

    • プロジェクトのルートディレクトリにvue.config.jsファイルを作成します(存在しない場合)。

    • vue.config.jsファイル内で、outputDirオプションを使用してビルドディレクトリを指定します。例えば、以下のように設定します:

      module.exports = {
      outputDir: 'dist/my-build-directory'
      };
    • 上記の例では、「dist/my-build-directory」がビルドディレクトリとなります。

  2. コマンドラインオプションを使用する方法:

    • ビルドコマンドを実行する際に、--destオプションを使用してビルドディレクトリを指定します。例えば、以下のようにコマンドを実行します:

      vue-cli-service build --dest dist/my-build-directory
    • 上記の例では、ビルドディレクトリは「dist/my-build-directory」となります。

  3. package.jsonファイルを使用する方法:

    • package.jsonファイル内の"scripts"セクションに、ビルドコマンドを追加します。例えば、以下のように設定します:

      {
      "scripts": {
        "build": "vue-cli-service build --dest dist/my-build-directory"
      }
      }
    • 上記の例では、npmランチャーを使用してビルドを実行する際に、指定したビルドディレクトリが使用されます。

これらの方法を使用することで、Vue.jsプロジェクトのビルドディレクトリをカスタマイズすることができます。適切な方法を選択し、プロジェクトの要件に応じてビルドディレクトリを指定してください。