Vue CLI 3 の構成ファイル概要

Vue CLI バージョン 3.0 以降では、プロジェクトのセットアップ方法が大きく変更されました。以前必要だった build および config ディレクトリは廃止され、設定管理がよりシンプルになりました。CLI サービス内部へ設定が移行したため、基本的な調整や拡張機能が必要になる場合、プロジェクトのルートディレクトリに vue.config.js ファイルを作成して記述します。

module.exports = {
  // 設定オプションをここに定義
}

公開パスとディレクトリ設定

baseUrl オプションは Vue CLI 3.3 以降で非推奨となり、publicPath に置き換えられました。

開発環境と本番環境で異なるパスを設定したい場合は、環境変数を使用条件分岐させるのが一般的です。開発時はルートパス、本番時は特定のサブパスなどを指定できます。

const IS_PRODUCTION = process.env.NODE_ENV === 'production';

module.exports = {
  publicPath: IS_PRODUCTION ? '/app-assets/' : '/'
}

ビルド出力先の定義

ビルドコマンドを実行した際に生成されるファイル群の保存先を指定します。

• outputDir: ビルド結果（dist フォルダなど）を格納するディレクトリ名。
• assetsDir: JS、CSS、画像などの静的アセットを配置するフォルダ名。

module.exports = {
  outputDir: 'build-output', // デフォルトは dist
  assetsDir: 'static'        // 静的リソース用フォルダ
}

コード品質チェックと開発サーバー

ESLint の実行タイミングやエラー表示挙動は lintOnSave で制御可能です。

• true: コンパイル時に警告として表示（デフォルト）。ビルド失敗しません。
• 'error': エラーとして扱われるため、ブラウザ上やコンパイル過程で失敗扱いとなります。

開発サーバー（webpack-dev-server）の設定には、ポート番号の指定や代理通信（Proxy）が含まれます。

module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production',
  
  devServer: {
    open: false,           // ブラウザ自動起動の有無
    host: '0.0.0.0',       // ホストアドレス
    port: 3000,            // サーバーポート
    
    proxy: {
      '/v1': {
        target: 'http://localhost:8888', // ターゲットサーバー
        secure: false,                   // https 証明書の検証無効
        changeOrigin: true,              // Host ヘッダーの変更
        pathRewrite: {
          '^/v1': ''                    // 接頭辞の削除
        }
      }
    }
  }
}

総合的な設定テンプレート

以下の例は、複数のページ構成、ハッシュ付きキャッシュ、SASS/Less 対応などを含む包括的な設定例です。実際の要件に合わせて調整してください。

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  // ベース URL
  publicPath: '/',

  // アウトプット先
  outputDir: 'dist',
  indexPath: 'index.html',
  
  // 静的アセット
  assetsDir: 'assets',
  filenameHashing: true,

  // マルチページアプリ設定
  pages: {
    home: {
      entry: 'src/main.ts',
      template: 'public/index.html',
      filename: 'index.html',
      chunks: ['chunk-vendors', 'chunk-common', 'home']
    },
    login: {
      entry: 'src/auth/main.ts',
      template: 'public/login.html',
      filename: 'login.html'
    }
  },

  // サインマップ設定
  productionSourceMap: false,

  // CSS カスタマイズ
  css: {
    extract: process.env.NODE_ENV === 'production',
    sourceMap: false,
    loaderOptions: {
      sass: { additionalData: `@import "@/styles/variables.scss";` }
    }
  },

  // Webpack 設定のカスタマイズ
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'development') {
      // 開発環境でのみに有効な設定
      config.devtool = 'cheap-source-map';
    }
  },

  // ロジックチェーンによる詳細設定
  chainWebpack: config => {
    // リゾルバエイリアスの設定
    config.resolve.alias
      .set('@', resolve('src'));
    
    // PWA プラグイン設定等もここで行う
  },

  // TypeScript/Babel 並列処理
  parallel: require('os').cpus().length > 1
}