Vue + Webpack Grayscale Release Control

внешний интерфейс JavaScript Vue.js Webpack

Цель

Реализуйте сосуществование нескольких версий интерфейсных проектов. Если есть только один ресурс, каждая модификация повлияет на всех пользователей.Для постоянно обновляемых веб-проектов необходимо обеспечить, чтобы каждая модификация затрагивала только небольшое количество пользователей, а не всех.Объем контроля, Сокращение потерь.

выполнить

В проекте используетсяgitконтроль версий

непосредственно сmasterФилиал используется в качестве производства, а функциональные модификации объединяются в мастер, а затем напрямую редактируются и отправляются на мастер, а код обновляется онлайн.

Теперь изменено: управлять через ветки и хранить несколько копий кода, сохраняя возможность модификации старой версии в будущем.

  • Генерация ветки из мастер-релиза-1.0.0
  • выпуски-1.0.0 развернуты в сети, а доступ к скомпилированным файлам измененного каталога осуществляется путем указания пути
  • Когда появятся другие новые функции, создайте новую ветку выпуска-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 осуществляется доступ к файлу XXX/DIST/INDEX.HTML.

Доступ к нескольким версиям

Тестовый каталог после исходного сервера, все файлы находятся в тестовом каталоге, включая скомпилированные файлы.

Теперь в тестовом каталоге сервера есть несколько файлов.Если vxx1, vxx2, в зависимости от фактической ситуации с маршрутизацией, доступ к конкретному каталогу, если это необходимо.

  • Доступ можно контролировать через nginx по ip или cookie
  • Его можно контролировать в фактическом коде проекта с помощью информации после входа в систему.
// vue-router 中有beforeEach
router.beforeEach((to, from, next) => {
    // 通过代码进行实际的访问控制
})

Конкретные требования также должны быть подробно рассмотрены.Если есть лучший способ или если есть какие-либо проблемы, пожалуйста, оставьте сообщение~~

Категории