Vue + Webpack 灰度发布控制

目的

实现前端项目多个版本共存。若是只存在一份资源，会致使每次修改都会影响到全部的用户，对于持续更新的Web项目来讲，须要保证每次的修改只会影响到小部分用户，而不是全部的，控制范围，减小损失。

实现

项目采用的是git版本控制

原直接以master分支做为production，功能修改完善合并到master上，而后直接在master上编辑提交，线上更新代码。

如今修改为：经过分支来控制，并保留多份代码，保留之后老版本修改的可能性

• 从master生成分支release-1.0.0
• releaes-1.0.0 在线上部署，经过指定路径来访问改目录的编译后文件
• 当有其余新功能时，产生新的分支release-x.x.x，部署访问

最后达到test.com/v1/，test.com/v2 这种访问效果。

项目配置的修改

• config/index.js 

// webpack 编译的配置文件，
// 主要修改时动态改变编译后的文件放置目录，配合Apache控制访问

// 增长版本获取函数 getVersion()，经过匹配当前版本名称，来获取具体的版本号
// 要求，对版本号的命名有格式的要求
var shell = require('shelljs')
var os = require('os')
function getVersion() {
  function exec (cmd) {
    return shell.exec(cmd, {silent: true}).toString().trim()
  }
  var releaseName = exec("git branch -vv|grep '*'")
  if (os.platform === 'win32') {
    releaseName = exec("git branch -vv|findstr '*'")
  }
  var reg = /\[origin\/release\-v[\d.?]*\]/
  if (reg.test(releaseName)) {
    var arr = releaseName.match(reg)
    return arr[0].replace('[origin/release-', '').replace(/\./g, '').replace(']', '').toString()
  }
}

// 修改env配置 和 build下的assetsPublicPath
module.exports = {
  build: {
    env: {...require('./prod.env'), version: "'" + getVersion() + "'"},
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist/'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/' + getVersion() + '/',
  },
  dev: {
    env: {...require('./dev.env'), version: "'" + getVersion() + "'"},
  }
}

复制代码

• src/router/index.js

// 修改route数组，增长根path路径
mode: 'history',
routes: [
    {
      path: process.env.NODE_ENV === 'development' ? '/' : ('/' + process.env.version + '/'),
      component: xxx,
      children: [
          ...
      ]
    }
]
复制代码

上线时Apache配置

配置Apache

当访问test.com/xxx，访问的是实际服务器部署的test目录下xxx/dist/index.html文件

访问多个版本

本来服务器上以后一个test目录，全部的文件都在test目录下，包括编译后的文件

如今服务器的test目录下有多个文件，若是vxx1， vxx2，根据实际的路由状况，访问到具体的目录下，若是有必要

• 能够以ip 或cookie 经过nginx来控制访问
• 能够经过登录后的信息，在实际的项目代码中来控制

// vue-router 中有beforeEach
router.beforeEach((to, from, next) => {
    // 经过代码进行实际的访问控制
})

复制代码

具体的要求还须要具体的去看，若是有什么更好的方式，或者哪里有问题，请留言～～