Vue大型项目之分模块运行/打包的实现

一、目标

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

11B76D4C-7FE6-52B7-6107-7B8A970060F1.png

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

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

二、打包单个模块

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

DA6E5C3D-BAB8-B224-550D-870E1A518D87.png

我们可以从这里入手。

这里就不得不提到cross-env这个模块了。

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

cross-env:npm install --save-dev cross-env

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

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

2F670AC0-A79F-101E-CBA1-3D436ECDB772.png

代码:

"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中配置如下代码:
<template>
		  <div id="app">
		    <router-view />
		  </div>
		</template>
		
		<style lang="less">
		
		</style>
  • 在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,写入如下代码:
<template>
		  <div>
		    我是a项目
		  </div>
		</template>
		
		<script>
		export default {};
		</script>
		
		<style></style>
  • 在项目最外层建立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

    6CB2E5BE-033B-5147-6EE5-524A5C72355C.png

  • 运行命令 cnpm run build:projectA

    C51BA0B8-89D3-06B4-487C-FE18D8164329.png

    效果完美。

三、打包总项目及子系统

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

  1. 在projects下建立公共模块的文件夹common,写入前面A项目的目录结构,如图:

    86E12B78-F47F-5F7B-53CF-C6B2AC45D8FC.png

  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",
  1. 在Home.vue中写公共导航

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

写入如下代码:

<template>
  <div class="main-content">
    <Layout>
      <header class="head-box">
        <Menu
          mode="horizontal"
          theme="primary"
          active-name="1"
          @on-select="menuClick"
        >
          <div class="layout-logo">Oralinge</div>
          <div class="layout-nav">
            <div class="layout-nav-content">
              <!-- 系统列表 -->
              <span v-for="(item, index) in systemList" :key="index">
                <MenuItem
                  :name="item.basepath + '?systemId=' + item.systemId"
                  @click="go(item)"
                >
                  <Icon type="ios-navigate"></Icon>
                  {{ item.title }}
                </MenuItem>
              </span>
            </div>
          </div>
          <div class="layout-right">
            <Dropdown>
              <!-- 登录姓名 -->
              <a href="javascript:void(0)">
                {{ user.userName }}
                <Icon type="ios-arrow-down"></Icon>
              </a>
              <!-- 退出登录 -->
              <DropdownMenu slot="list">
                <DropdownItem name="logout">退出登录</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </div>
        </Menu>
      </header>
    </Layout>
    <iframe
      :src="systemUrl"
      width="100%"
      height="100%"
      frameborder="0"
      class="iframe"
      id="bossIframe"
    ></iframe>
  </div>
</template>
<script>
import {
  Layout,
  Menu,
  MenuItem,
  Dropdown,
  DropdownItem,
  DropdownMenu
} from "view-design";

export default {
  components: {
    Layout,
    Menu,
    MenuItem,
    Dropdown,
    DropdownItem,
    DropdownMenu
  },
  data() {
    return {
      systemUrl: "",
      isFullscreen: false,
      loading: false,
      systemList: [
        {
          title: "A项目",
          basepath: "http://localhost:8080/#/",
          systemId: "A"
        },
        {
          title: "B项目",
          basepath: "http://localhost:8082/#/",
          systemId: "B"
        },
        {
          title: "C项目",
          basepath: "http://localhost:8083/#/",
          systemId: "c"
        },
        {
          title: "D项目",
          basepath: "http://localhost:8084/#/",
          systemId: "D"
        }
      ],
      user: {}
    };
  },
  mounted() {
    this.systemUrl =
      this.systemList[0].basepath + "?systemId=" + this.systemList[0].systemId;
  },
  methods: {
    menuClick(name) {
      this.systemUrl = name;
    }
  }
};
</script>

<style lang="less" scoped>
@head-height: 50px;
.main-content {
  height: 100%;
  padding-top: @head-height;
  box-sizing: border-box;
  overflow: hidden;
}
.head-box {
  width: 100%;
  height: @head-height;
  line-height: @head-height;
  position: fixed;
  top: 0;
  left: 0;
  min-width: 1200px;

  .ivu-menu-horizontal {
    height: 100%;
    line-height: @head-height;
  }
  .layout-logo {
    display: inline-block;
    width: 200px;
    color: #fff;
    font-size: 28px;
    text-align: center;
    vertical-align: top;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #2d8cf0;
    z-index: 5;
  }
  .layout-nav {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding-left: 200px;
    padding-right: 100px;
    box-sizing: border-box;
    overflow-x: auto;
    z-index: 4;
    &-content {
      //   width: 100%;
      overflow: hidden;
      height: 100%;
    }
  }
  .layout-right {
    padding-right: 20px;
    padding-left: 20px;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #2d8cf0;
    z-index: 5;
    a {
      color: #fff;
    }
  }

  .ivu-menu-item-active {
    font-size: 20px;
  }
}
</style>

效果:

0689D6D0-E09D-AE3B-672B-CADD5D35C267.png

B项目使用同样的方法配置文件。

配置后效果如下:

9892BEEF-F534-F457-37AE-89076D7ECA61.png

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

下面看一下打包。

在分别运行了B项目和common的打包命令以后,效果正常。

75868FF6-6D7F-09F9-989C-08CB815C73D5.png

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

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

四、demo地址

https://github.com/Oralinge/pointsmodule

以上。

收藏 (0)
评论列表
正在载入评论列表...
我是有底线的