vue多頁面應用如何針對其中的某個頁面進行單獨打包

一、應用場景：

多個項目需要用到共同的元件，這時用多頁面vue應用再适合不過了。但是這多個項目需要分别部署在不同伺服器上，是以需要我們針對每個項目（即每個頁面）進行單獨打包。

二、單獨打包某個頁面：

這裡我們以單獨打包vue多頁面應用中的其中一個頁面（detail.html）為示例進行說明。

1）建立新的打包模式：建立檔案".env.detail"

# set ENV
NODE_ENV = 'production'
# 需要打包的頁面
PAGE_NAME = 'detail'
           

2）配置打包指令：修改package.json檔案

// package.json檔案部分代碼
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:detail": "vue-cli-service build --mode detail",
  },
           

3）動态配置pages: 修改vue.config.js檔案

// vue.config.js檔案部分内容
// getPages方法生成pages對象：沒有參數（即不指定打包的頁面）時，打包所有頁面；若有參數（即指定打包頁面）時，
const path = require("path");
const glob = require("glob");
const baseDir = filePath => path.basename(path.dirname(filePath));

function getPages(pageName) {
  let map = {};
  // 多頁面（整個項目）打包
  if (!pageName) {
    const PAGE_PATH = path.resolve(__dirname, "./src/pages");
    let entryFiles = glob.sync(PAGE_PATH + "/*/*.html");
    entryFiles.forEach(filePath => {
      let filename = baseDir(filePath);
      let tmpArr = filePath.split("/");
      let tmp = tmpArr.splice(0, tmpArr.length - 1);
      map[filename] = {
        entry: tmp.join("/") + "/" + "main.js",
        template: filePath,
        filename: filename + ".html"
      };
    });
    console.log(map)
    return map;
  }
  // 指定單頁面打包
  map[pageName] = {
    entry: "src/pages/"+pageName+"/main.js",
    template: "src/pages/"+pageName+"/index.html",
    filename: pageName + ".html"
  }
  console.log(map)
  return map
}
const pages = getPages(process.env.PAGE_NAME);

module.exports = {
  publicPath: "/",
  pages: pages
}