vue 多环境打包

package.json默认配置

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

改为

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode development",
    "test-build": "vue-cli-service build --mode test",
    "pro-build": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },

注：

1. npm run serve 的时候，默认是 development 所以 --mode development可以省略
2. process.env.VUE_APP_CURENV 默认也是development

全局axios配置

var baseUrl = "";
console.log('当前环境', process.env.VUE_APP_CURENV)
switch (process.env.VUE_APP_CURENV) {
  case "development":
    baseUrl = "http://172.1.22.29:5000/api/v1"; //开发
    break;
  case "test":
    baseUrl = "http://172.1.22.29:5010/api/v1"; //测试
    break;
  case "production":
    baseUrl = "http://172.1.22.29:5010/api/v1"; //生产环境url
    break;
}

api.defaults.baseURL = baseUrl

新增文件

.env.development
-----
NODE_ENV = 'production'
VUE_APP_CURENV = 'development'
-----
.env.production
-----
NODE_ENV = 'production'
VUE_APP_CURENV = 'production'
-----
.env.test
-----
NODE_ENV = 'production'
VUE_APP_CURENV = 'test'
-----

本地同一局域网，通过ip查看

在config文件下的index.js文件中，修改host为：

host: '0.0.0.0'，

或者在package.json文件下"scripts"的"dev"后面加上–host 0.0.0.0"
例如：

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",

重启服务可以看到通过localhost和IP地址都可以访问到这个服务。