场景

从项目开发到生产一般会有三个环境，开发环境、测试环境、生产环境。不同环境对应API请求地址是不一样的，而vue-cli 默认只提供了 dev 和 production 两种环境,这显然不能满足我们需求；怎么办呢？如果使用人力每次发布不同环境时都去修改环境配置文件！这就脱离自动化打包了，而且浪费不必要人力物力还容易出错；

所以我们需要借助webpack 去帮助我们简化打包流程，从而进行不同环境API配置请求地址配置

首先打开Vue工程如下操作：

• 创建env 全局默认配置文件

  .env.production 生成环境配置

  NODE_ENV=production                            // 环境变量 
  VUE_APP_CURRENTMODE='production'               //当前模式
  VUE_APP_PORT = 'https://www.baidu.com/API'     //API 接口地址配置
  outputDir='production'                         // 打包文件名
  

  .env.test 测试环境配置

  NODE_ENV='test'                                // 环境变量
  VUE_APP_CURRENTMODE='test'                     //当前模式
  VUE_APP_PORT='https://www.baidu.com/test/API'  //API 接口地址配置
  outputDir='test'                               // 打包文件名
  

  .env.dev 开发环境配置

  NODE_ENV='dev'                                // 环境变量 
  VUE_APP_CURRENTMODE='dev'                     //当前模式
  VUE_APP_PORT='https://www.baidu.com/dev/API'  //API 接口地址配置
  outputDir='dev'                               // 打包文件名 
  

  如图：

  

  package.json 配置修改

  "scripts": {
      "serve": "vue-cli-service serve",
      "buildProd": "vue-cli-service  build  --mode production",
      "buildTest": "vue-cli-service build --mode test",
      "buildDev": "vue-cli-service build --mode dev"
    }
  

  新建API 请求地址文件

  config文件夹下创建index.js;

    ```js
    /**  接口地址 */   
    
    let httpUrl = '' 
  
    if (process.env.NODE_ENV.trim()==='production') {    //生产环境
        httpUrl = process.env.VUE_APP_PORT
    }else if(process.env.NODE_ENV.trim()==='test'){      //测试环境
        httpUrl =process.env.VUE_APP_PORT
    }else if(process.env.NODE_ENV.trim()==='dev'){       //开发环境
        httpUrl =process.env.VUE_APP_PORT
    }else{ 
        httpUrl ='http://47.115.173.66:8099'  // 本地开发环境访问地址
    }
    export default httpUrl
    ```
  

  通过process.env.VUE_APP_PORT获取到自定义的环境变量，获取对应环境的API地址

  vue.config.js 配置修改

  
      修改vue.config.js 文件里的outputDir
  
      outputDir: process.env.outputDir
  

  通过process.env.outputDir获取到自定义的环境变量，获取对应环境打包文件名

  这时已经完成项目对多环境配置。接下来对Jenkins项目购机进行配置,Jenkins安装和项目创建在这就不做多的描述，不会的同学可以百度下；

  **Jenkins项目构建时配置**

  
    //下载工作区npm包 
    npm install    
    //删除test目录下的所有文件,test目录即为当前`jenkins`工作区打包后的文件。
    rm -rf ./test 
    //执行打包命令,根据不同环境选择不同打包命令：如测试  npm run buildTest 开发 npm run buildProd
    npm run `buildTest` 
    //删除服务器上/www/web/test/ 目录下的所有文件/www/web/test/ 为服务器项目放置位置。 
    rm -rf /www/web/test/*
    //把当前构建工作区test目录里的文件 copy 到服务器/www/web/test 文件夹下。
    cp -rf ./test/* /www/web/test
  
  
  

到这里已经完成项目多环境配置及Jenkins 自动化打包构建配置;