Reprint Please specify source: http://www.cnblogs.com/shamoyuu/p/vue_vux_4.html
Project GitHub Address:Https://github.com/shamoyuu/vue-vux-iconan
The previous chapter we basically completed the development, packaging tasks, but there are many problems, such as Build.webapp will be packaged into the Dist/www folder, we want to be Dist folder
We are going to solve this problem in this chapter.
First create a new file in the project root directory 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" } } } }}
This file stores the configuration information we need
And then we get it in the Gulpfile.js file.
Const OPTIONS = require ('./options.json ');
Then let's go ahead and let's get the command-line arguments.
Getting command-line arguments requires the Minimist plug-in to convert the PROCESS.ARGV array into an object
ConstMinimist = require ('minimist');//command line parameter configurationConstArgsoptions = { string: ['e','P','T'], default: {e:'Production',//environment, optional values are "test" "Production "P:'Android',//platform, only valid when T is mobile, optional value is "Android"T:'WebApp' //target, optional parameters are "mobile" "WebApp" }};Constargs = Minimist (Process.argv.slice (2), argsoptions);
So that our configuration files and command-line parameters are captured, we continue to refine the task.
First get the values of these 3 parameters
Consttarget =OPTIONS.TARGETS[ARGS.T];if(!target | |!args.t) { Throw('Target'+ ARGS.T +'does not exist');}Constenv =OPTIONS.TARGETS[ARGS.T].ENV[ARGS.E];if(!env | |!ARGS.E) { Throw('Environment'+ ARGS.E +'does not exist');} Let platform='Android';if(ARGS.T = ='Mobile') {Platform=OPTIONS.TARGETS[ARGS.T].PLATFORMS[ARGS.P]; if(!platform) { Throw('Platform'+ ARGS.P +'does not exist'); }}
Then modify the Config/index.js file to add a property to exports to use when Target=webapp
Buildwebapp: { '.. /dist/index.html'), '. /dist')}
Then we modify the Gulpfile file to add a target environment variable
Process.env.target = ARGS.T;
This will enable you to get the current target in other files.
However, the statement that gets the Webpackconfig object needs to be placed below this line.
Then we modify the Build/webpack.prod.conf.js file, first of all to determine whether the current target is Mobild
Const ' Mobile ';
Then modify the filename of the Htmlwebpackplugin plugin
Filename:ismobile? Config.build.index:config.buildWebapp.index
Modifying the path of output
Path:ismobile? Config.build.assetsRoot:config.buildWebapp.assetsRoot
OK, now the different target can be packaged into different paths.
But that's not enough, and we're going to refine target in the next chapter.
Vue and Vux Development WebApp Log Four, continue to improve the Gulp task, add command line parameters