Posted at

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
})
}
}