轉載請註明出處：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。

Vue和Vux開發WebApp日誌四、繼續完善gulp任務，增加命令行參數