purpose

Realize the coexistence of multiple versions of front-end projects. If only one resource exists, each modification will affect all users. For Web projects that are constantly updated, it is necessary to ensure that each modification will only affect a small number of users, rather than all of them, to control the scope and reduce losses.

implementation

Git version control is adopted in the project

Originally, the master branch was directly used as production, and the functions were modified and merged into the master. Then, the master was directly edited and submitted, and the code was updated online.

Change to: control by branching, and keep multiple copies of code, leaving open the possibility of later changes to older versions

  • Generate branch release-1.0.0 from master
  • Releaes-1.0.0 is deployed online and uses a specified path to access compiled files that have changed directories
  • When other new features are available, a new branch release-x.x.x is generated to deploy access

Finally achieve test.com/v1/, test.com/v2 such access effect.

Modify the project configuration

  • config/index.js 
// Add the function getVersion() to get the specific version number by matching the current version name. 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('] '.' 'Setspublicpath 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() + "'"}}},Copy the code
  • src/router/index.js
// Modify route array, add root path path mode:'history',
routes: [
    {
      path: process.env.NODE_ENV === 'development' ? '/' : ('/' + process.env.version + '/'), component: xxx, children: [ ... ] }]Copy the code

Apache is configured when online

Configure the Apache

When you visit test.com/xxx, you will access the XXX /dist/index.html file in the test directory deployed on the actual server

Accessing multiple versions

All files are in the test directory, including compiled files

Now the server has multiple files in the test directory, if vxx1, vxx2, depending on the actual routing situation, access to the specific directory, if necessary

  • Access can be controlled via Nginx using IP or cookies
  • Can be logged in through the information, in the actual project code to control
// Vue-router has beforeEach router. BeforeEach ((to, from, next) => {// Actual access control via code})Copy the code

Specific requirements also need specific to see, if there is any better way, or where there is a problem, please leave a message ~ ~