基於vue腳手架實現多項目獨立打包（一）

最近接到一個需求，公司需要對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 = {
    projectName: "projectA",
    publicPath: "./",
    chainWebpack: (config) => {
        config.resolve.alias
            .set('@', resolve('./')) //配置各個項目的@
    },
    pages: {
        projectA: {
            // page 的入口
            entry: 'src/projectA/main.js',
            // 模板來源
            template: 'public/projectA/index.html',
            // 在 dist/`${projrectA}`/index.html 的輸出
            filename: 'index.html',
            // 當使用 title 選項時，
            // template 中的 title 標簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            //    title: 'project A Page',
            // 在這個頁面中包含的塊，默認情況下會包含
            // 提取出來的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common']
        }
    }
}

module.exports = configs

　　

projectName非常關鍵，后面壓縮生成文件后存放時會用到。

 

 

 

 先寫到這，來活了，步驟太多有空補上，后面主要時對vue打包流程的改寫。