Vue项目运用webpack多环境配置的问题和本地开发跨域问题

实际运用场景

在我们开发前端应用中，往往需要使用多个环境，例如

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