多系统集成：vue大型项目之分模块运行/打包

本文以vue-cli3+为例，实现多系统集成下的分模块打包。分模块打包方式多种多样，下文可适用于多系统之间互不干扰，主系统可集成各子系统，各子系统又可单独运行的业务场景。

一、目标

我们要实现什么？所谓分模块打包，那么各个模块内就必须得有自己独立的入口文件，路由文件。按照这种构想，我在一个新的脚手架src目录下新建了一个projects目录：

如上图，可以看到Aproject、B、C、D四个项目。我在A项目中建了assets，common和views文件夹，其中assets可以再建img和css的文件夹，common内可以放公共组件或者方法，views页面可以放页面，甚至你还可以建一个components文件夹专门用来放组件。

好了，我们的视图目录结构大概就是上面的样子。我们期待的是，我们可以打包这个A模块这个‘小vue’，就像打包一个完整vue的项目一样。那么如何实现这部分呢？

---

二、打包单个模块

我们知道，在package.json中，有项目启动，打包的命令。

我们可以从这里入手。

这里就不得不提到cross-env这个模块了。
我们之前在设置生产环境，测试环境，开发环境时也会用到这个模块。在这里不详细表述了。

cross-env：npm install --save-dev cross-env

现在我们的思路大概是这样的，当我们执行打包命令的时候，通过cross-env去找到我们的入口文件，然后再打包。

所以我们可以模仿环境变量的写法，在package中写入如下图代码。

代码：

    "dev:projectA": "cross-env PROJECT_NAME=projectA vue-cli-service serve",
    "dev:projectB": "cross-env PROJECT_NAME=projectB vue-cli-service serve",
    "dev:projectC": "cross-env PROJECT_NAME=projectC vue-cli-service serve",
    "dev:projectD": "cross-env PROJECT_NAME=projectD vue-cli-service serve",
    "build:projectA": "cross-env PROJECT_NAME=projectA vue-cli-service build",
    "build:projectB": "cross-env PROJECT_NAME=projectB vue-cli-service build",
    "build:projectC": "cross-env PROJECT_NAME=projectC vue-cli-service build",
    "build:projectD": "cross-env PROJECT_NAME=projectD vue-cli-service build",

写完了这些，我们就可以着手模仿vue配置小vue的文件了。

• 在main.js中配置如下代码：

        import Vue from "vue";
		import App from "./App.vue";
		import router from "./router";
		import store from "./store";
		
		Vue.config.productionTip = false;
		
		new Vue({
		    router,
		    store,
		    render: h => h(App)
		}).$mount("#app");

• 在App.vue中配置如下代码：

• 在router.js中配置如下代码

		import Vue from "vue";
		import Router from "vue-router";
		import Home from "./views/Home.vue";
		
		Vue.use(Router);
		
		export default new Router({
		  routes: [
		    {
		      path: "/",
		      name: "home",
		      component: Home
		    }
		  ]
		});

• 在page文件夹中建立Home.vue,写入如下代码：

• 在项目最外层建立config文件夹，在其中新建projectsConfig.js写入：

const config = {
  projectA: {
    pages: {
      index: {
        entry: "src/projects/projectA/main.js",
        template: "public/index.html",
        filename: "index.html"
      }
    },
    devServer: {
      port: 8080, // 端口地址
      open: false, // 是否自动打开浏览器页面
      host: "0.0.0.0", // 指定使用一个 host，默认是 localhost
      https: false, // 使用https提供服务
      disableHostCheck: true,
      // 设置代理
      proxy: {
        "/eopenhapi": {
          target: "http://open.jdpay.com",
          changeOrigin: true
        },
        "/hapi": {
          target: "http://open.jdpay.com",
          changeOrigin: true
        }
      }
    }
  },
  projectB: {},
  projectC: {}
};
module.exports = config;

• 把projectsConfig.js并入vue.config.js，vue.config.js中代码如下

const config = require("./config/projectsConfig.js");
let projectName = process.env.PROJECT_NAME;

module.exports = {
  ...config[projectName],
  // pages: conf.pages,

  // 基本路径
  // baseUrl: './',//vue-cli3.3以下版本使用
  publicPath: "./", // vue-cli3.3+新版本使用

  // 输出文件目录
  outputDir: "dist/" + projectName + "/"
};

写到这里我们就建立一个完整的小vue了。

• 运行命令 cnpm run dev:projectA
  

• 运行命令 cnpm run build:projectA
  
  效果完美。

三、打包总项目及子系统

一个大型项目必然会有公共模块，这里会写一个导航栏作为公共组件。

1. 在projects下建立公共模块的文件夹common，写入前面A项目的目录结构，如图：
   
2. 在package.json中写入运行命令和打包命令。

 "dev:common": "cross-env PROJECT_NAME=common vue-cli-service serve",
 "build:common": "cross-env PROJECT_NAME=common vue-cli-service build",

3. 在Home.vue中写公共导航

   这里会使用iview作为ui组件，但也因此有一个问题，我的A,B,C,D四个项目每个项目引入一遍UI框架，那打包出来整个项目将会非常的大，所以我们在子项目必须采用按需引入的方式。（项目中还是下载整个ivew）

写入如下代码：

效果：

B项目使用同样的方法配置文件。
配置后效果如下：

到这里，我们就基本实现了分模块运行以及集体运行了。

下面看一下打包。
在分别运行了B项目和common的打包命令以后，效果正常。

另外，我在这里采用了iframe的方式嵌入了其他项目，是因为引入的方式打包的时候会打包太多。

这样做的好处就是公共项目仅仅作为一个外壳使用，其他项目与其并没有太多的关联，保证了每个项目模块的独立性。

---

四、demo地址

https://github.com/Oralinge/pointsmodule

---

以上。