多項目共用目錄開發，分項目打包

寫在前面

首先，不知道標題取的是否正確，這裏詳細描述下使用的場景。以前負責了項目組理財產品的移動端開發，近期項目組打算開發保險產品的移動端版本。看過設計稿和交互稿後發現，兩個項目的基礎頁面是基本相同的，如：登陸，註冊，忘記密碼，我的中心……固然還包括一些基礎的UI組件也是相同的。一開始的想法是保險產品也重起一個項目開發，後面想一想，他們這麼多的共同點，難道要把理財的基礎頁面和組件複製一份來開發保險嗎，這麼作的話勢必之後要維護兩套相同的代碼，因而我想能不能他們放在一塊兒開發，而npm run dev和npm run build是分項目進行的，具體實現以下(項目是基於vue-cli3.0開發的，因此相關配置是在其基礎上修改的)：

修改npm script

"scripts": {
    "invest-dev": "vue-cli-service serve -invest",//運行該命令表示啓動理財項目
    "insurance-dev": "vue-cli-service serve -insurance",//運行該命令表示打包理財項目
    "invest-build": "vue-cli-service build -invest",//同上
    "insurance-build": "vue-cli-service build -insurance"//同上
}
複製代碼

先看看分項目構建的效果

區分項目相關核心代碼project.config.js

/*
配置不一樣項目的輸出文件夾名稱，文件路徑前綴，項目入口
*/
const env=process.env.NODE_ENV;
const project={
	invest:{
		outputDir:'invest',//理財的輸出文件夾名稱爲invest
		publicPath:env==='development'?'/':'/test/invest',//若是是開發環境文件引用前綴爲'/'
		entry:'./src/pages/invest/main.js'
	},
	insurance:{
		outputDir:'insurance',
		publicPath:env==='development'?'/':'/test/insurance',
		entry:'./src/pages/insurance/main.js'
	}
}

module.exports=project
複製代碼

配置vue.config.js文件

const project=require('./config/project.config.js');
const projectName=process.argv[3]?process.argv[3].substring(1):'invest';//獲取如命令：vue-cli-service serve -invest中的第三個參數「-invest」，截取invest用做區分項目使用

module.exports = {
    outputDir:project[projectName].outputDir,
    publicPath:project[projectName].publicPath,
    pages: {
        index: {
            entry: project[projectName].entry,// page 的入口
            template: 'public/index.html',// 模板來源
            filename: 'index.html',//輸出文件名稱
        },
    }
}
複製代碼

文件目錄截圖

vue.config.js和project.config.js

項目業務代碼