vue-cli4.0+nodejs多个项目共用组件动态打包单个项目

前言：

公司经常会有一些活动，为了配合活动开发人员需要开发一些h5页面来配合活动，刚开始活动不多，所有活动页面都放在一个项目目录下，webpack共用一个固定打包入口，对路由(vue-router)和状态管理(vuex)进行模块划分，不同的活动页面通过不同的路由路径来加载。
随着活动项目增多，页面也越来越多，问题就就出现了，比如打包projectA，webpack也会把projectB,projectC打包进来，因为SPA应用是一次性下载所有资源文件，这就造成访问projectA或者projectB或者projectC的时候会变得慢，因为把一些不相干的代码也下载下来了。
有人会说每有一个项目vue init另起一个工程目录，但是这样每次都要复制一下工具类等公用代码，每次都要配置下环境，有的活动也就一两个页面另起一个工程没必要。

该架构是由vue-cli4.0生产后修改的结果，由于vue-cli4.0提供了十分方便的配置，项目看起来十分简单

github代码获取

项目运行：

• npm i安装依赖
• npm run d projectA运行项目A
• npm run b projectB打包项目A

效果：

• 项目A
  
  

• 项目B
  
  

目录结构：

代码解析：

1.脚本文件：当npm run d/b + 项目名字的时候让webpack知道你想打包哪个项目

• dev.js运行脚本：

let projectName = process.argv[2]

console.log('\x1B[32m','————————————————您正在运行的项目名是————————————————', projectName);

let fs = require('fs');

// 记录正在运行的项目名
fs.writeFileSync('./config/project.js', `exports.name = '${projectName}'`)

// 启动一个新的进程，并执行命令
let exec = require('child_process').execSync;
exec('npm run serve', {stdio: 'inherit'});

• build.js打包脚本：

let projectName = process.argv[2]

console.log('\x1B[32m','————————————————您正在打包的项目名是————————————————', projectName);

let fs = require('fs')

// 记录正在运行的项目名
fs.writeFileSync('./config/project.js', `exports.name = '${projectName}'`)


// 启动一个新的进程，并执行命令
let exec = require('child_process').execSync;
exec('npm run build', {stdio: 'inherit'});

• project.js项目名称记录脚本，里面的内容会在命令执行后自动修改
• projectConfig.js独立项目配置文件（重要），添加独立项目时想要在里面添加项目的文件路径，指引webpack打包,每一项相当于一个HtmlWebpackPlugin，所以它能配置的东西比vue-cli上面说的要多。

const projectName = require('./project')

const config = {
    //项目A
    projectA: {
      pages: {
        index: {
          entry: 'src/projects/projectA/main.js',
          outputDir: "dist/projectA/",
          template: 'public/index.html',
          filename: 'index.html',
        }
      }
    },
    //项目B
    projectB: {
      pages: {
        index: {
          entry: 'src/projects/projectB/main.js',
          outputDir: "dist/projectB/",
          template: 'public/index.html',
          filename: 'index.html',
        }
      }
    },
    // 更多...
}

const configObj = config[projectName.name]
module.exports = configObj

2.vue.config.js修改vue-cli默认的webpack打包配置(主要用了pages属性)：
更多配置请参考

/**
 * 
 * 项目配置详情
*/
const conf = require('./config/projectConfig');
module.exports = {
  pages: conf.pages,
  lintOnSave: false
};

环境变量和模式

• 建立相应的文件，添加全局的环境配置，参考官网