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