转载请注明出处：http://www.cnblogs.com/shamoyuu/p/vue_vux_4.html
项目github地址：https://github.com/shamoyuu/vue-vux-iconan
上一章我们基本上完成了开发、打包的任务，但是还有很多问题，例如build.webapp会打包到dist/www文件夹中，我们希望是dist文件夹
我们这章来解决这个问题。
首先在项目根目录新建一个文件options.json
{ "targets": { "mobile": { "environments": { "test": { "service": "http://meleong.duapp.com/psh/union" }, "production": { "service": "http://meleong.duapp.com/psh/union" } }, "platforms": { "android": { "cordovaVersion": "5.2.2" }, "ios": { "cordovaVersion": "4.3.0" } } }, "webapp": { "environments": { "test": { "service": "http://meleong.duapp.com/psh/union" }, "production": { "service": "http://meleong.duapp.com/psh/union" } } } } }
这个文件存储我们需要的配置信息
然后我们在gulpfile.js文件里获取它
const options = require(‘./options.json‘);
然后先放着，我们来获取命令行参数。
获取命令行参数需要用到minimist插件，来将process.argv数组转化成一个对象
const minimist = require(‘minimist‘); //命令行参数配置 const argsOptions = { string: [‘e‘, ‘p‘, ‘t‘], default: { e: ‘production‘, //环境，可选值有【test】【production】 p: ‘android‘, //平台，只在t为mobile时有效，可选值有【android】 t: ‘webapp‘ //目标，可选参数有【mobile】【webapp】 } }; const args = minimist(process.argv.slice(2), argsOptions);
这样我们的配置文件和命令行参数都获取到了，我们来继续完善任务。
首先获取这3个参数的值
const target = options.targets[args.t]; if(!target || !args.t){ throw(‘目标‘ + args.t + ‘不存在‘); } const env = options.targets[args.t].env[args.e]; if(!env || !args.e){ throw(‘环境‘ + args.e + ‘不存在‘); } let platform = ‘android‘; if(args.t == ‘mobile‘){ platform = options.targets[args.t].platforms[args.p]; if(!platform){ throw(‘平台‘ + args.p + ‘不存在‘); } }
然后修改config/index.js文件，给exports添加一个属性用来在target=webapp时使用
buildWebapp: { index: path.resolve(__dirname, ‘../dist/index.html‘), assetsRoot: path.resolve(__dirname, ‘../dist‘) }
然后我们修改gulpfile文件，添加一个target的环境变量
process.env.target = args.t;
这样就能在其他文件中获取当前的target了
但是需要把获取webpackConfig对象的语句放到这一行下面。
然后我们修改build/webpack.prod.conf.js文件，首先判断当前target是否为mobild
const isMobile = process.env.target == ‘mobile‘;
然后修改HtmlWebpackPlugin插件的filename
filename: isMobile ? config.build.index : config.buildWebapp.index
修改output的path
path: isMobile ? config.build.assetsRoot : config.buildWebapp.assetsRoot
好了，现在不同的target可以打包到不同的路径下。
但是这还不够，我们下一章来完善target。
