多个vue项目实现共用一个node-modules文件夹

多个vue项目共用一个node-modules文件夹

问题背景

一个目录下有多个vue项目。

>> root
    -- my-vueproject-a
        -- package.json
        -- node-modules
    -- my-vueproject-b
        -- package.json
        -- node-modules
...

期望结果

将所有vue项目中的依赖包提取为一个

>> root
    -- my-vueproject-a
    -- my-vueproject-b
    -- package.json
    -- node-modules
...

找到了一个可行的方法,但不确定是否是最优解决方法(网上看到好多说法也并不建议不同项目共用同一个依赖node-modules)

解决方法

1.在所有项目的共同父级目录下创建package.json,添加好所有项目需要用到的依赖配置

2.在此父级目录下(root)运行 npm install

3.单独的vue项目中仍然需要保留node-modules文件夹,但是该文件夹里面只需要保留@vue 和 .bin 两个文件夹。其他的依赖包当项目无法在自身目录的node-modules中找到的话就会自动冒泡从父级(父级的父级…)去寻找。

这样,就可以避免重复下载多个依赖包,实现多个vue项目共用同一个node-modules依赖包。

关于共用node_modules的凡尔赛结论

不得不说,NPM对于node_modules的管理实在是……随便一个稍微复杂点的项目,你要建立一个新的版本,好吧,node_modules就是一个巨无霸。

其实,node_modules并不需要在你的项目根目录,而且,项目间是可以共享node_modules的

最最简单的做法就是

D:\Projects\node_modules
D:\Projects\projectA
D:\Projects\projectB
D:\Projects\projectC

每个project目录里,复制node_modules内容到父目录后,删掉自己项目里的node_modules就可以了,没有任何影响,这样,建立新项目的时候,也完全不需要有那个动辄几百M的大node_modules了。

这么简单的东西,相信,嗯,额……没几个人知道吧

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • nginx部署多个vue项目的方法示例

    上一篇已经介绍了然后配置web项目:今天由于公司需求,需要在同一域名端口下,部署两个项目:今天花了一上午终于弄好了,选择赶紧做一个笔记. 如何连接阿里云服务器就不在这里说了,请看我以前的文章. 首先需要的效果 http://47.97.244.83/login http://47.97.244.83/student/login 文件目录 两个项目并列在同一文件夹内. 准备好两个vue的项目 http://47.97.244.83/login:这个不用修改配置直接build就可以.关键是二级域名的

  • 基于Vue-cli的一套代码支持多个项目

    应用场景 在toB端业务中,同样的产品,客户多多少少会要求一些定制化.从皮肤,图片,到一些小的功能的差异. 前端总是冲在最前面需要改的.如果改动不大的话,拉个分支有增加了维护的成本,分支拉多了,如果主干有一个问题相当于copy了n份,那个滋味简直不要太酸爽.那么,是否可以一套代码支持多个项目呢? 前段时间,接了一个需求,技术选型是VUE,用vue-cli搭建的.一套代码需要支持10几家客户,每家的皮肤,功能都有一些小的差异,主体流程大致是一样的.在这个场景下研究了一下解决方案. 思路 总体的思路

  • vue项目总结之文件夹结构配置详解

    前言 之前一段时间都在使用 vue 开发后台管理系统,在摸索的过程中对 vue 本身和模块化.规范化开发有了更深的认知,现在记录下来,希望对其他需要开发项目的人有帮助. 基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用 ES Next.scss 等最新语言特性.下面随着小编来一起学习学习吧. 项目配置 首先,在确定好使用的框架和组件库后,先要大致了解它们,做到文档基本熟悉.本次开发使用到的有: vue , vuex , axios , elementUI .

  • 多个vue项目实现共用一个node-modules文件夹

    多个vue项目共用一个node-modules文件夹 问题背景 一个目录下有多个vue项目. >> root     -- my-vueproject-a         -- package.json         -- node-modules     -- my-vueproject-b         -- package.json         -- node-modules ... 期望结果 将所有vue项目中的依赖包提取为一个 >> root     -- my-

  • vue项目中使用axios上传图片等文件操作

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 首先安装axios: 1.利用npm安装npm install axios –save 2.利用bower安装bower install axios

  • nginx 部署 vue 项目找不到js css文件的解决方法

    很多时候 npm run build 之后, index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对,发布到服务器上之后,nginx 找不到文件. vue-cli@3 在 vue-cli@3 中你需要为你 webpack 插入到 index.html 中 的所有文件添加一个 baseUrl. 你需要在项目的根目录新建一个 vue.config.js, 添加如下内容: ... module.exports = { baseUrl: isProd ? '/

  • vue项目中使用rem,在入口文件添加内容操作

    在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码: <script> window.onload = function () { var setRem = function () { // UI设计稿的宽度 var uiWidth = 1200; // 移动端屏幕宽度 var winWidth = document.documentElement.clientWidth; // 比率 var rate = winWidth / uiWidth; //

  • 详解Vue项目的打包方式(生成dist文件)

    目录 一.相关配置 情况一(使用的工具是 vue-cil) 情况二(使用的工具是 webpack) 二.打包 一.相关配置 情况一(使用的工具是 vue-cil) 如果是用 vue-cli 创建的项目,则项目目录中没有 config 文件夹,所以我们需要自建一个配置文件:在根目录 src 下创建文件 vue.config.js,需注意文件名称必须是 vue.config.js,然后在文件中插入以下代码: //打包配置文件 module.exports = { assetsDir: 'static

  • vue项目中常见的三种文件类型在线预览实现(pdf/word/excel表格)

    目录 前言 一.预览word文件 1.安装 npm 依赖 2.预览在线地址文件 3.预览本地文件 二.预览excel表格 1.安装依赖 2.预览在线表格 三.pdf预览 1.安装依赖vue-pdf 2.在需要的页面注册 3.使用 4.加载本地pdf文件 5.解决pdf使用自定义字体预览和打印乱码问题:pdfjsWrapper.js 总结 前言 之前做PDF预览一直用的pdf.js,这次没有太多附加需求比较简单简,所以决定用vue-pdf这个组件,虽然说它没有原生那样强大,但已经满足常用的需求了,

  • Node.js 文件夹目录结构创建实例代码

    第一次接触NodeJS的文件系统就被它的异步的响应给搞晕了,后来发现NodeJS判断文件夹是否存在和创建文件夹是还有同步方法的,但是还是想尝试使用异步的方法去实现. 使用的方法: fs.exists(path, callback); fs.mkdir(path, [mode], callback); 实现文件夹目录结构的创建代码实现如下: //创建文件夹 function mkdir(pos, dirArray,_callback){ var len = dirArray.length; con

  • 如何用electron把vue项目打包为桌面应用exe文件

    目录 1.首先从electron官网克隆一个demo npm与cnpm的区别 2. 接下来,在已创建好的vue-cli项目中 3. 在新建的项目的package.json文件中增加一条指令 下面附上我的文件目录 如果按本文操作遇到一些问题报错,如C:\Users\milyyy\AppData\Roaming\npm-cache\_logs\2018-11-27T07_36_17_406Z-debug.log等等 解决办法可以参见我的另一篇文章:electron打包VUE项目中遇见的报错问题及解决

  • vue 打包后找不到dist文件夹的解决方案

    目录 打包后找不到dist文件夹 运行vue打包后的dist文件夹下的项目 需要安装http-server 通过命令行进入到dist文件夹 打包后找不到dist文件夹 接受一个别人做了一半的项目  , 结果要打包测试的时候  执行npm run build 后 没有dist 文件 看了一下 config文件夹里面的index.js 文件 的build对象, 原来是默认的打包路劲被修改了 , 修改回来就好了, __dirname是获取当前位置的绝对路径 运行vue打包后的dist文件夹下的项目 需

  • Vue如何下载本地静态资源static文件夹

    目录 下载本地静态资源static文件夹 下载静态文件方法 下载 下载本地static静态文件的踩坑 下载本地静态资源static文件夹 下载静态文件方法 <a href="/static/serviceAgreement.docx" rel="external nofollow" rel="external nofollow" download="下载"></a> 下载 项目需要下载本地的docx文档

随机推荐