vue-cli3.0 中創建多個子項目，並能分別打包到對應的文件夾下

           在項目中我們經常會做多個小的vue項目，這些項目頁面不多，功能也不復雜，它們可以共用依賴，但是我們又不能每個小項目單獨初始化vue項目，這個時候，我們就希望在一個vue腳手架下創建多個子項目，它們互不干擾，可以獨立運行，但又能共用一套依賴；

          其實這個需求尤大大早就替我們想到了，在vue-cli的官方文檔中就有介紹;

pages

• Type: Object

• Default: undefined

  在 multi-page 模式下構建應用。每個“page”應該有一個對應的 JavaScript 入口文件。其值應該是一個對象，對象的 key 是入口的名字，value 是：

  module.exports = {
    pages: {
      index: {
        // page 的入口
        entry: 'src/index/main.js',
        // 模板來源
        template: 'public/index.html',
        // 在 dist/index.html 的輸出
        filename: 'index.html',
        // 當使用 title 選項時，
        // template 中的 title 標籤需要是 <title><%= htmlWebpackPlugin.options.title %></title>
        title: 'Index Page',
        // 在這個頁面中包含的塊，默認情況下會包含
        // 提取出來的通用 chunk 和 vendor chunk。
        chunks: ['chunk-vendors', 'chunk-common', 'index']
      },
      // 當使用只有入口的字符串格式時，
      // 模板會被推導爲 `public/subpage.html`
      // 並且如果找不到的話，就回退到 `public/index.html`。
      // 輸出文件名會被推導爲 `subpage.html`。
      subpage: 'src/subpage/main.js'
    }
  }
  

  提示

  當在 multi-page 模式下構建時，webpack 配置會包含不一樣的插件 (這時會存在多個 html-webpack-plugin 和 preload-webpack-plugin 的實例)。如果你試圖修改這些插件的選項，請確認運行 vue inspect。

  • 一個指定了 entry, template, filename, title 和 chunks 的對象 (除了 entry 之外都是可選的)；
  • 或一個指定其 entry 的字符串。
    
    
    vue-cli官方文檔地址
    
     

下面我們就來一步步操作，自己搭建一個分項目打包的項目模板

cd vue-cli3-template

根據個人需要去選擇配置，在這裏我們直接選擇手動配置
待項目依賴安裝好後，進入項目根目錄，啓動項目

cd vue-cli3-template
npm run serve

使用腳手架創建的vue項目均爲單頁面應用，但在實際生產應用中，我們常常需要用到多頁面應用，接下來我們將項目改爲多頁面應用：

將項目目錄調整如下：

在項目根目錄下創建vue.config.js文件。

按照官方文檔的配置，修改vue.config.js內容如下 

module.exports = {
  pages: {
    projectA: {
      // page 的入口
      entry: 'src/pages/projectA/main.js',
      // 模板來源
      template: 'public/index.html',
      // 在 dist/index.html 的輸出
      filename: 'projectA.html',
      // 當使用 title 選項時，
      // template 中的 title 標籤需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'project A Page',
      // 在這個頁面中包含的塊，默認情況下會包含
      // 提取出來的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'projectA']
    },
    // 當使用只有入口的字符串格式時，
    // 模板會被推導爲 `public/subpage.html`
    // 並且如果找不到的話，就回退到 `public/index.html`。
    // 輸出文件名會被推導爲 `subpage.html`。
    projectB: {
      // page 的入口
      entry: 'src/pages/projectB/main.js',
      // 模板來源
      template: 'public/index.html',
      // 在 dist/index.html 的輸出
      filename: 'projectB.html',
      // 當使用 title 選項時，
      // template 中的 title 標籤需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'project B Page',
      // 在這個頁面中包含的塊，默認情況下會包含
      // 提取出來的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'projectB']
    }
  }
}

重新啓動項目，訪問下面兩個地址即可看到多頁面的效果。
http://localhost:8080/projectA#/
http://localhost:8080/projectB#/

但是這個時候打包會有問題，執行npm run build進行編譯打包，打包結果兩個不同的項目的文件各自編譯打包，但並沒有按項目分成不同的文件夾放置，這不是我們希望的，接下來我們對vue.config.js做以下修改：

var projectname = process.argv[3];
var glob = require("glob");

function getEntry() {
  var entries = {};
  if (process.env.NODE_ENV == "production") {
    entries = {
      index: {
        // page的入口
        entry: "src/pages/" + projectname + "/main.js",
        // 模板來源
        template: "public/index.html",
        // 在 dist/index.html 的輸出
        filename: "index.html",
        title: projectname,
        chunks: ["chunk-vendors", "chunk-common", "index"]
      }
    };
  } else {
    var items = glob.sync("./src/pages/*/*.js");
    for (var i in items) {
      var filepath = items[i];
      var fileList = filepath.split("/");
      var fileName = fileList[fileList.length - 2];
      entries[fileName] = {
        entry: `src/pages/${fileName}/main.js`,
        // 模板來源
        template: `public/index.html`,
        // 在 dist/index.html 的輸出
        filename: `${fileName}.html`,
        // 提取出來的通用 chunk 和 vendor chunk。
        chunks: ["chunk-vendors", "chunk-common", fileName]
      };
    }
  }
  return entries;
}

var pages = getEntry();
module.exports = {
  productionSourceMap: false, // 生產禁止顯示源代碼
  outputDir: "dist/" + projectname,
  pages: pages
};

打包命令也要做以下修改 

#  npm run build [projectFileName]
npm run build projectA
npm run build projectB

重新打包 ，結果符合我們的預期了

到此配置結束 

參考博客：https://blog.csdn.net/Hampton_Chen/article/details/88931567