Vue CLI 3でPC用、モバイル用を指定してビルドする

## 前提

レスポンシブにはできないけど、PCとモバイルでコンポーネントは共有したいといった場合を想定しています。

## 実施環境

* OS: macOS Mojave (10.14)
* Vue CLI: 3.0.5

## 今回のゴール
npm scriptsでPC用、モバイル用を指定してビルドできるようにする

## 今回の成果物
こちらに置いてあります

[negibouze/vue-cli-multiple-config-example](https://github.com/negibouze/vue-cli-multiple-config-example)

## 1. 設定ファイルを複数用意する
[こんな感じ](https://qiita.com/negibouze/items/3f02188058bd5bfbf678)に設定ファイルを2つ用意する。

## 2. entryを複数用意する
分けたいファイル（main.ts、App.vue等）を必要分用意する。
ディレクトリは任意（ここではentry/pc、entry/sp）。
※長いので内容の詳細は省略

## 3. 設定ファイルを編集する
[公式ページ](https://cli.vuejs.org/config/#pages)を参考に vue.config.js にpagesを追記する。

```vue.config.js
module.exports = {
  outputDir: 'dist/pc',
  pages: {
    index: {
      entry: 'src/entry/pc/main.ts',
      template: 'public/index.html',
      filename: 'index.html',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
  }
}
```

```vue.config.sp.js
module.exports = {
  outputDir: 'dist/sp',
  pages: {
    index: {
      entry: 'src/entry/sp/main.ts',
      template: 'public/index_sp.html',
      filename: 'index.html',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
  }
}
```

## 4. npm scriptsを用意する

**編集前**

```package.json
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
},
```

**編集後**

```package.json
"scripts": {
  "serve": "VUE_CLI_SERVICE_CONFIG_PATH=$PWD/config/vue.config.js vue-cli-service serve",
  "build": "VUE_CLI_SERVICE_CONFIG_PATH=$PWD/config/vue.config.js vue-cli-service build",
  "lint": "VUE_CLI_SERVICE_CONFIG_PATH=$PWD/config/vue.config.js vue-cli-service lint",
  "serve:sp": "VUE_CLI_SERVICE_CONFIG_PATH=$PWD/config/vue.config.sp.js vue-cli-service serve",
  "build:sp": "VUE_CLI_SERVICE_CONFIG_PATH=$PWD/config/vue.config.sp.js vue-cli-service build",
  "lint:sp": "VUE_CLI_SERVICE_CONFIG_PATH=$PWD/config/vue.config.sp.js vue-cli-service lint"
},
```

## 5. 動作確認

`yarn serve`
<img width="952" alt="pc_layout.png" src="https://qiita-image-store.s3.amazonaws.com/0/37319/3223dfa5-45df-e649-ff56-8fab67a85d18.png">

`yarn serve:sp`
<img width="342" alt="sp_layout.png" src="https://qiita-image-store.s3.amazonaws.com/0/37319/8295d5fc-dc6a-7cf8-5a7e-7f555b65ef75.png">

ここまででやりたいことは概ね終了ですが、このままだとビルド時に不要なファイル（index_sp.html等）も`dist`配下にコピーされてしまうため、コピーしないようにします。

## 6. 設定ファイルを編集する

ここでは、index_sp.html をコピー対象から外しています。

```vue.config.js
module.exports = {
  outputDir: 'dist/pc',
  pages: {
    index: {
      entry: 'src/entry/pc/main.ts',
      template: 'public/index.html',
      filename: 'index.html',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
  },
  chainWebpack: config => {
    config
      .plugin('copy')
      .tap(args => {
        args[0][0].ignore.push('index_sp.html')
        return args
      })
  }
}
```

```vue.config.sp.js
module.exports = {
  outputDir: 'dist/sp',
  pages: {
    index: {
      entry: 'src/entry/sp/main.ts',
      template: 'public/index_sp.html',
      filename: 'index.html',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
  },
  chainWebpack: config => {
    config
      .plugin('copy')
      .tap(args => {
        args[0][0].ignore.push('index_sp.html')
        return args
      })
  }
}
```