Vue.js+Element-UI从0到部署:基础篇（3.前端自动化、多环境配置到发布）-白红宇

上一节中我们介绍到相关必要的依赖注入在实际开发过程中，往往不只develop 和production两种环境，往往还有测试环境，仿真环境等等，需要配置不同的选项（BASE_API等），本文将一步一步进行讲解如何添加环境配置。本文实例为增加一个测试环境的打包配置。并且结合配置构建多环境打包，并且自动化发布到服务器。

多环境打包

步骤1

在./config文件夹下新建一个sit.env.js 的文件

// 测试仿真环境module.exports = {  NODE_ENV: '"production"',  BASE_API: '"http://120.55.169.121:8888/index"',  CRM_PATH: '"http://120.55.169.121:8083"',        //  其他配置};复制代码

dev.env.js 、prode.env.js 也可进行类似的配置，把各个环境请求的不同端口配置在这

后面在你的程序中，如果要使用这些变量可参考下例

let baseUrl  = process.env.BASE_API;  let crmPath = process.env.CRM_PATH;// 创建axios实例const service = axios.create({  baseURL: BASE_API,      // api的base_url})复制代码

步骤2

修改./build/build.js 文件，将 process.env.NODE_ENV = 'production' 注释或者删除，因为我们在后面需要动态配置NODE_ENV，此步骤如图

步骤3

修改./build/webpack.prod.conf.js 文件修改 evn,不BB直接上图

const env = require('../config/'+process.env.env_config+'.env')复制代码

这样webpack 的配置就修改完了。在这里可以顺便修改一下这个文件下 UglifyJsPlugin，打包构建的时候可以去除console.log，debugger。配置如下。（此步骤和多环境配置无关）

new webpack.optimize.UglifyJsPlugin({      compress: {        warnings: false,        drop_debugger: true,     // 去除构建的 debugger        drop_console: true        //  去除构建的 console      },      sourceMap: true    }),复制代码

步骤4

我们需要修改 package.json 的script 语句来增加命令启动我们新增的服务

"scripts": {    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",    "start": "npm run dev",    "build:sit": "NODE_ENV=production env_config=sit node build/build.js",    "build:prod": "NODE_ENV=production env_config=prod node build/build.js"  },复制代码

然后启动 run run build:sit，可是这个时候报错了，env_config 不被识别，这是由于 windows 不支持 env_config=sit 设置的方式。我们只需要安装一个 cross-env 的插件即可

yarn add cross-env -D   // 或者你使用npm 也可  npm install cross-env -dev--save复制代码

接下来继续修改一个 script 语句启动即可

"scripts": {    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",    "start": "npm run dev",    "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"  },复制代码

这样你启动 npm run build:sit 将构建打包测试环境的代码生成在 dist 文件目录下启动 npm run build:prod 将构建打包生产环境的代码生成在 dist 文件目录下

多环境发布

安装

npm install fjpublish -g复制代码

在项目根目录下建立一个 fjpublish.config.js 文件（为fjpublish配置文件）

module.exports = {  modules: [{    name: '测试环境',       env: 'sit',    ssh: {      host: '11.11.111.11',     // 服务器地址      port: 22,                 // 端口      username: 'root',         // 用户名      password: 'XXXX'          // 密码    },    buildCommand: 'build:sit',    // 构建命令  === npm run build:sit      localPath: 'dist',            // 构建后上传文件    remotePath: '/test/xx',       // 服务端路径  }，｛    name: '其他环境',    env: 'other',    ....｝]}复制代码

同样的为了方便我们需要修改 package.json 的script mode

"scripts": {    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",    "start": "npm run dev",    "build:sit": "cross-env env_config=sit node build/build.js",    "build:prod": "cross-env env_config=prod node build/build.js",    "public:sit": "fjpublish env sit"  },复制代码

运行命令 npm run public:sit 确认后就会自动打包build:sit的代码，并且压缩后发布带你指定的服务器上，并且执行你的响应配置，如果需要多环境同时发布，只需要在fjpublish.config.js里面的modules里面增加一个对象进行相关配置即可。

至此 Vue-cli 项目的前端自动化已经配置好了。小伙伴们赶紧去试试把！

其他具体配置请看作者的文档详情