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

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

多环境打包

步骤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 文件目录下

多环境发布

安装 fjpublish

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 项目的前端自动化已经配置好了。小伙伴们赶紧去试试把！

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