多系统集成：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中配置如下代码：

        <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，默认是 localhosthttps: 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

效果完美。

三、打包总项目及子系统

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

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

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

在Home.vue中写公共导航

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

写入如下代码：

<template><div class="main-content"><Layout><header class="head-box"><Menumode="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>

效果：

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

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

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

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

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

四、demo地址

https://github.com/Oralinge/pointsmodule

以上。

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

vue 分模块打包脚手架_vue-cli分模块独立打包
基于vue-cli3多模块独立打包一.目标我们要实现什么? 所谓分模块打包,也可以说一个项目一个模块,理解: 在src目录下,多个项目共用一些数据方法,但是每个项目有自己独立的入口文件,路由文件, ...
mean项目的分模块开发
全文字版: 新建maven工程在,作为父工程用于最后集合使用,该工程不需要src,只需要一个pom.xml文件,规定一下依赖版本之类的,再建一个工具类的工程,不需要放配置文件,和工程中方法接口有关的不 ...
iOS 大型项目开发漫谈
从http://www.cocoachina.com/ios/20150828/13170.html转载,谢谢写这篇文章的大神! 标题有些吓人请不要害怕,不过这确实不是扫盲贴,需要一定的iOS开发基础 ...
iOS大型项目开发漫谈
标题有些吓人请不要害怕,不过这确实不是扫盲贴,需要一定的iOS开发基础.在我多年的码农生涯中绝大部分时间都是做的小项目,大一些的可能也就是百万行代码的样子,跟Windows系统几千万行源码比简直就是小 ...
基于vue技术栈制作自己的简历网站问题总结篇(入门vue基础项目)
前言目前在学习vue技术栈的同时接触到了很多以前没用过的各种工具(如webpack,npm,git等等),配合着vue全家桶里的一些东西做了一个基于vue的个人简历网站(虽然用vue框架搭简历网站优 ...
宝塔面板部署nuxt_MacOS下创建及部署vue.js项目（及Nuxt.js、PM2等相关流程）
开发环境权限准备为避免后续流程出现权限不足的相关提示,首先在终端中输入以下代码检查当前系统是否已开启了对系统文件夹的保护: csrutil status 若结果为csrutil enabled,则 ...
bootstrap-pagination数据全部加载到前端再进行处理_求助！vue单页项目如何改造路由使其能够进行分模块打包？...
最近遇到一个很难解决的问题,搜索了百度谷歌都没有相关的资料,有可能是我搜索的关键词不对或者是需要我换一种思路去解决,希望各位大佬能帮忙看一下怎么解决.问题目前是这样的,目前有个基于VUE的单页后台项目 ...
vue 多页面多模块分模块打包分插件安装_Vue渲染方式
Vue中的渲染方式总结可分四种: 原有模板语法,挂载渲染使用render属性,createElement函数直接渲染使用render属性,配合组件的template属性,createElement ...
[vue] 说下你的vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？
[vue] 说下你的vue项目的目录结构,如果是大型项目你该怎么划分结构和划分组件呢? views目录存放一级路由的组件,即视图组件 Components目录存放组件 Store存放vuex相关文件 ...

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

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

最新文章

热门文章