实际运用场景
在我们开发前端应用中,往往需要使用多个环境,例如
1.本地开发环境
2.测试环境
3.正式环境
所以每个环境都需要对相应的服务器地址、环境专属变量等做出单独的配置。
Vue项目
1.初始化
我们使用vue-cli init生成的项目,调试与打包已经为我们在package.json中做好了。
/* /package.json */
"scripts": {
"dev": "webpack-dev-server --inline --host 0.0.0.0 --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"e2e": "node test/e2e/runner.js",
"test": "npm run e2e",
"build": "node build/build.js",
}
* 之前遇到的问题:本地调试 localhost:8080 可正常访问,但是使用本机ip(http://192.168.*.*:8080)无法访问;
解决方法:在package.json中dev命令加上 0.0.0.0 ;
* 这里想特别说明一下的是,vue-cli脚手架帮我们生成好了整个项目,而且也有对应webpack.dev.conf.js和webpack.prod.conf.js两个分离的webpack配置文件,但由于文件的命名问题(dev.conf.js/prod.conf.js),很容易让人误以为这两个文件就是webpack针对不同环境的配置。但实际上这两个文件一个是用于本地调试时的配置文件,另一个是用于打包部署的配置文件。调试/打包两种模式 与 环境(dev/test/pre/prod等)是可以相互组合的。理论上来讲这两个webpack的配置文件我觉得应该叫webpack.debug.conf.js和webpack.build.conf.js会更贴切一点。
2.环境参数传递
通过yargs可以方便的获取指定名称的命令行参数,它是node.js