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

前提

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

実施環境

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

今回のゴール

npm scriptsでPC用、モバイル用を指定してビルドできるようにする

今回の成果物

こちらに置いてあります

negibouze/vue-cli-multiple-config-example

1. 設定ファイルを複数用意する

こんな感じに設定ファイルを2つ用意する。

2. entryを複数用意する

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

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

公式ページを参考に 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

yarn serve:sp

ここまででやりたいことは概ね終了ですが、このままだとビルド時に不要なファイル（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
      })
  }
}