最近接到乙個需求，公司需要對vue專案實現線上打包，並且生成對應的壓縮包，依賴於vue-cli。
1.後台服務端提供的素材為乙個專案json，需要解析生成乙個完整的專案並且置入vue腳手架內。
2.生成完畢後，進行vue打包，在dist下生成專案各自的資料夾，然後將打包完成的vue專案放入，並且對專案進行壓縮，生成壓縮包放入dist下的zip目錄內，zip目錄可能存在尚未建立的情況。
3.當所有流程結束後，通知後台服務打包完成，返回專案目錄以及壓縮目錄。
現在已經實現 多個專案存放在乙個腳手架內，src，public，dist通過專案名進行區分，執行npm run build +專案名可實現單獨打包該專案並且生成對應檔案。
打包前目錄
執行打包：
打包完成後：
首先，需要配置根目錄下的vue.config.js
outputdir：打包完成後輸出專案到對應目錄
publicconfig:各專案自己的public靜態資源目錄
這些配置會混合各專案下的config.js的內容，在下圖紅框內的options.js
接下來是專案內部配置項：
專案目錄下建立config.js
const path = require('path');
const resolve = dir => path.join(__dirname, dir);
var configs = ,
pages: `/index.html 的輸出
filename: 'index.html',
// 當使用 title 選項時，
// template 中的 title 標籤需要是
// title: 'project a page',
// 在這個頁面中包含的塊，預設情況下會包含
// 提取出來的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common']}}
}module.exports = configs
projectname非常關鍵，後面壓縮生成檔案後存放時會用到。
先寫到這，來活了，步驟太多有空補上，後面主要時對vue打包流程的改寫。
vue腳手架搭建專案
首先安裝node，npm會自動安裝，node v 和 npm v檢視是否安裝成功和版本 切換npm為cnpm使用 映象源 npm install cnpm g registry cnpm 檢視是否成功和版本號 安裝vue cli cnpm install g vue cli vue v檢視版本 進入...
vue搭建腳手架專案
cli 3.0.0 g 安裝webpack打包工具 4 npm install webpack g 5 npm install g vue cli 安裝vue框架 6 新建vue專案路徑和專案及其所在的專案資料夾 後續安裝準備工作 7 cd c 個人 vuejs 然後enter回車鍵 開始找上乙個步...
vue腳手架，搭建vue專案框架
1.安裝node.js 2.基於node.js,利用 npm映象安裝相關依賴 在cmd裡直接輸入 npm install g cnpm registry 回車，等待安裝.3.安裝全域性vue cli腳手架,用於幫助搭建所需的模板框架 在cmd裡 1 輸入 cnpm install g vue cli...