現(xiàn)在基本上比較成熟的部署方式就是Docker鏡像化部署胚嘲，微服務(wù)的概念早已經(jīng)深入人心录别，所以這里希望完成的Vue+Express腳手架能夠初始化的項目代碼結(jié)構(gòu)為：
前后端分離撮珠，相互獨立宿饱，相當(dāng)于兩個微服務(wù)壹无，這里的server就是在02中經(jīng)過改造后的后端目錄結(jié)果，webapp就是使用Vue-cli自動生成的目錄結(jié)構(gòu)绍在。
我們都知道直接使用vue init命令生成的只是webapp门扇，而沒有server,這主要是由于webpack模板導(dǎo)致的，這一章節(jié)主要就是對webpack的模板做簡單的修改偿渡，使其能夠在vue init命令執(zhí)行之后臼寄，生成我們想要的Vue+Express目錄結(jié)構(gòu)。
webpack模板
webpack模板可以去github上面下載溜宽，下載完成之后吉拳，將其置放于下面的路徑中：
源碼目錄結(jié)構(gòu)為：
這里主要關(guān)注上面兩個紅色標(biāo)注的文件以及文件夾template就是腳手架實際生成的項目代碼目錄，這兩個地方都需要進(jìn)行修改才能滿足要求适揉。
template文件夾改造
改造前里面只有Vue前端的初始化代碼：
改造后的template目錄機構(gòu)為：
webapp就是改造后的Vue源碼目錄留攒，server就是之前改造后的目錄結(jié)構(gòu)：
其它文件改造
這一章節(jié)不做過多的改造，目的只是能夠成功生成期望目錄結(jié)構(gòu)的靜態(tài)站點嫉嘀，不去考慮修改與用戶交互的內(nèi)容稼跳。由于template的目錄結(jié)構(gòu)做了蠻大的變化，所以需要去閱讀整個的渲染過程吃沪，不然直接執(zhí)行vue init命令會報錯汤善，各種目錄找不到等。票彪。具體的源碼就不帶大家讀了红淡，直接提示的兩個地方：
//meta.js中179行，complete函數(shù)主要是執(zhí)行npm install安裝依賴
const cwd = path.join(process.cwd(), data.inPlace ? '' : data.destDirName, 'webapp')
//utils/index.js 13行
const packageJsonFile = path.join(
data.inPlace ? '' : data.destDirName,
'webapp/package.json'
)
缺陷
到目前為止降铸，使用vue init命令生成的目錄結(jié)構(gòu)已經(jīng)是我們期望的目錄在旱，但是我們還有更高的要求：
- server端也要和webapp一樣，能夠自動的安裝依賴包推掸。
- 能夠讓用戶選擇是否需要server桶蝎，還是說只想要Vue前端框架即可，所以要動態(tài)配置谅畅，讀取用戶的選擇后登渣，動態(tài)渲染模板。
