基于webpack4.0 搭建vue多模块系统

已于 2022-01-19 19:49:27 修改
阅读量2.2k 收藏
点赞数
分类专栏： web前端 文章标签： vue.js webpack javascript
于 2019-03-14 22:04:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cxgasd/article/details/88562479
版权

基于webpack4.0 搭建vue多模块系统。

当一个系统包含多个模块时，总不能每个模块开一个vue项目吧，做不到资源共用，通过改造webpack配置来聚合多个模块，达到资源共用的效果。

在config/index.js中配置相关的模块名，即可引入子模块，还可以指定打包的模块。

目录结构如图，modules文件夹下存放各个模块。

子模块文件夹如图

打完包之后的文件夹结构图

最近比较忙，还没腾出空来整理。具体webpack配置请看源代码。

github地址 vue-multiple-module

仁泉之子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-webpack多模块
05-02
vue项目里多个模块并存，多模块打包生成单独项目，webpack-cli
vue-cli webpack3 扩展多模块打包
weixin_33995481的博客
04-04 382
场景 在实际的项目开发中会出现这样的场景，项目中需要多个模块（单页或者多页应用）配合使用的情况，而vue-cli默认只提供了单入口打包，所以就想到对vue-cli进行扩展 实现 首先得知道webpack是提供了多入口打包，那就可以从这里开始改造 新建build/entry.js const path = require('path') const fs = require('fs') con...
Vue 3 + Vite 多项目多 dist 打包操作指南
最新发布
paper_umbrella的博客
06-25 2401
vue3打包，多个子项目分开打包
webpack中多模块依赖
weixin_30433075的博客
06-26 195
多模块依赖 刚才的例子，我们仅仅是跑通了webpack通过entry.js入口文件进行打包的例子。下面我们就来看一下它是否真的支持CommonJs和AMD两种模块机制呢？下面我们新建多几个js文件吧！ // 修改module1.js require(["./module3"], function(){ console.log("Hello Webpack!"); }); ...
# Vue 多模块管理路由（Router）、请求（Axios）
不积跬步，无以至千里；不积小流，无以成江海
05-02 994
Vue 多模块管理路由（Router）、请求（Axios） 友情链接：Vue 组件封装打包发布：https://blog.csdn.net/qq_37248504/article/details/123293585 使用 vue-router 需求 前端 Vue拆分成多个模块的时候，路由在各自模块中管理，最后将路由收集到主模块中进行注册 Vue多模块中axios配置调用不同的服务 路由Router 统一管理 目前有模块 shop-back-app、和 lowcode-model，shop-ba
使用Webpack进行模块化开发与打包
Sun_blog
06-29 1408
Webpack是一个现代化的JavaScript模块打包工具，它可以将多个模块打包成一个或多个静态资源文件。通过Webpack，我们可以将项目中的各个模块进行模块化开发，并将它们打包成一个或多个可供浏览器加载的静态资源文件。通过以上示例，我们可以看到使用Webpack进行模块化开发与打包的过程。Webpack可以帮助我们将项目中的各个模块进行模块化开发，并将它们打包成一个或多个静态资源文件，提高代码的可维护性和可复用性，同时还可以优化资源，提高页面的加载速度。
基于webpack4.0搭建的vue多模块项目.zip
10-21
在本项目中，“基于webpack4.0搭建的vue多模块项目.zip”是一个使用Webpack 4.0构建的Vue.js应用程序，旨在实现多个独立模块的管理。Vue.js是一个流行的前端JavaScript框架，而Webpack是一个强大的模块打包工具，...
基于webpack实现的简单vuecli
08-10
在基于 Webpack 的 Vue CLI 中，它们协同工作，帮助开发者高效地管理和构建 Vue 项目。 首先，Vue CLI 提供了预配置的脚手架，可以快速初始化一个新的 Vue 项目。只需通过 npm 或 yarn 安装 Vue CLI 全局工具，然后...
基于vite+vue3+pinia+element-plus+ts后台管理系统
04-08
【vite】是Vue.js作者尤雨溪发起的一个新型构建工具，它提供了热模块替换（HMR）、快速启动和按需编译等特性，相比传统的webpack，Vite在开发环境下的启动速度和更新响应速度有显著提升，极大地提高了开发效率。...
vue cli4.0项目引入typescript的方法
10-15
Vue CLI 4.0 是一个强大的工具，用于快速搭建基于 Vue.js 的项目。它提供了许多预设和自动化功能，包括对 TypeScript 的支持。在 Vue CLI 4.0 中引入 TypeScript，可以帮助开发者利用静态类型检查来提升项目的质量...
webpack40从零配置实现简单的vue项目配置
08-10
本文将深入探讨如何使用 Webpack 4.0 从零配置来搭建一个简单的 Vue 项目。 首先，确保安装了 Node.js 和 npm（Node 包管理器）。然后，创建一个新的项目目录并进入该目录： ```bash mkdir my-vue-project cd my-...
基于vue-cli搭建多模块且各模块独立打包的项目
10-16
主要介绍了基于vue-cli搭建多模块且各模块独立打包的项目,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue-multi-modules:vue多目录配置
04-29
多模块 这是一个基于vue-cli2.x与webpack的多模块架构，旨在实现本地开发调式与生产保持一致 项目组织架构 build config conf.js -- 对应子系统的本地运行端口配置 src common--各个子系统的公共资源 invite src assets pages/views router main.js static index.html service src assets pages/views router main.js static index.html build.js -- 重新定义的npm run build指令运行文件 dev.js -- npm run dev 本地运行文件 期望 npm run dev 子系统名字 / all 运行该子系统或者将所有子系统全部吊起来运行 npm run build 子系统名字 / all 打包该子系统或者
vue运行多个子系统框架
01-25
1，支持vue多个子系统 2，支持每个子系统打包 3，支持每个子系统运行 4，提供各种node脚本
vue-multi-page:vue下的多页面应用
05-18
vue2.* (多页面跳转) @[vue2.3.3|webpack2.6.1|scss|axios] 以前看过有相关朋友share了空的多页面脚手架. 不过down了几个都是webpack1.0或者vue1.0的. 刚好项目需要用到vue. 就在vue-cli的基础上进行了修改 已经有babel直接用es6即可,如果需要修改配置的请到 .babelrc里面修改 并且全局引了JQ(如果不需要或者不喜欢 请到base.conf.js里面修改) 命令 国际惯例 npm install (or cnpm 其他) 装依赖包 npm run dev 起服务 npm run build 打上线包 跑起来服务后,需要在url输入 /module/*.html (*为对应文件夹名字) 添加了新文件夹后,需要重新 npm run dev一下 ##目录结构 build/config: 一系列配置文件 src:
vue-multi-module【多模块集成的vue项目，多项目共用一份配置，可以互相依赖，也可以独立打包部署】...
weixin_33958585的博客
05-08 5953
基于 vue-cli 2 实现，vue 多模块、vue多项目集成工程 Github项目地址 : github.com/BothEyes199… 目标：多模块集成的vue项目，多项目共用一份配置，可以互相依赖，也可以独立打包部署 使用业务场景 1.如果项目可能有对应多个不同UI界面;对于这样的场景你可能首先会想到，用样式主题就可以实现，基本的样式或者换肤是可以通过样式实现。但如果要实现更复杂的，比如...
vue init webpack 多模块项目搭建
qq_37550440的博客
05-19 560
基于 vue-cli 4 实现，vue 多模块、vue多项目集成工程 Github项目地址 :https://github.com/zhanghenxiao/webpack_multi_project 目标：多模块集成的vue项目，多项目共用一份配置，可以互相依赖，也可以独立打包部署 使用业务场景 1.如果项目可能有对应多个不同UI界面;对于这样的场景你可能首先会想到，用样式主题就可以实现，基本的样式或者换肤是可以通过样式实现。但如果要实现更复杂的，比如不同两套UI的界面可能功能显示及样式都有差别.
基于 vue-cli 2 实现，vue 支持多模块项目
大猩猩X
01-22 6613
基于 vue-cli 2 实现，vue 多模块、vue多项目集成工程 业务场景 1.如果项目可能有对应多个不同UI界面;对于这样的场景你可能首先会想到，用样式主题就可以实现，基本的样式或者换肤是可以通过样式实现。但如果要实现更复杂的，比如不同两套UI的界面可能功能显示及样式都有差别，那就不得不单独拆成一个项目，但是这样又会造成每个项目很多冗余代码。 2.如果项目有多个子模块(同时子模块...
# Vue 多模块项目调试
不积跬步，无以至千里；不积小流，无以成江海
05-02 486
Vue 多模块项目调试 友情链接：Vue 组件封装打包发布：https://blog.csdn.net/qq_37248504/article/details/123293585 需求描述 vue多模块开发的时候 ，调试本地的模块。 场景描述 有自己封装的组件模块 A，模块B依赖模块A，组件A开发好之后，发布到npm仓库，B模块安装A的依赖，使用A中的组件 本地调试 主要思路 组件 A 导出向外导出所有的组件和Js 模块B导入组件A中导出的内容 示例代码 组件A导出在lib.js中导出所有
webpack4.0搭建单页/多页脚手架：JQuery, React, Vue, TypeScript
"本文主要介绍如何使用webpack 4.0构建单页和多页应用的脚手架，涉及jQuery、React、Vue和TypeScript。webpack是一个静态模块打包工具，通过构建依赖图并生成bundle来处理现代JavaScript应用。在webpack 4.0中，可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值