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的文档详情