實現前端項目多個版本共存。若是隻存在一份資源,會致使每次修改都會影響到全部的用戶,對於持續更新的Web項目來講,須要保證每次的修改只會影響到小部分用戶,而不是全部的,控制範圍,減小損失。html
項目採用的是git
版本控制前端
原直接以master分支做爲production,功能修改完善合併到master上,而後直接在master上編輯提交,線上更新代碼。vue
如今修改爲:經過分支來控制,並保留多份代碼,保留之後老版本修改的可能性webpack
最後達到test.com/v1/,test.com/v2 這種訪問效果。nginx
// 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() + "'"},
}
}
複製代碼
// 修改route數組,增長根path路徑
mode: 'history',
routes: [
{
path: process.env.NODE_ENV === 'development' ? '/' : ('/' + process.env.version + '/'),
component: xxx,
children: [
...
]
}
]
複製代碼
配置Apachegit
當訪問test.com/xxx,訪問的是實際服務器部署的test目錄下xxx/dist/index.html文件web
本來服務器上以後一個test目錄,全部的文件都在test目錄下,包括編譯後的文件vue-router
如今服務器的test目錄下有多個文件,若是vxx1, vxx2,根據實際的路由狀況,訪問到具體的目錄下,若是有必要shell
// vue-router 中有beforeEach
router.beforeEach((to, from, next) => {
// 經過代碼進行實際的訪問控制
})
複製代碼
具體的要求還須要具體的去看,若是有什麼更好的方式,或者哪裏有問題,請留言~~數組