vue大型项目之分模块运行/打包的实现_vue分模块,vue分模块打包 - CSDN文库

分模块打包

71 浏览量更新于2023-03-03 评论 3 收藏 156KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

主要介绍了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;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余5页未读，立即下载

评论0

weixin_38598613

粉丝: 7
资源: 914

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈