vue npm run dev 启动项目很慢

最新推荐文章于 2025-04-01 12:56:51 发布

六月有点方

最新推荐文章于 2025-04-01 12:56:51 发布

阅读量2.3w

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_39851243/article/details/89817706

版权

前端专栏收录该内容

1 篇文章

订阅专栏

每次npm run dev 启动项目的时候就会building modules，而且会很慢，不知道是什么原因

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

六月有点方

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
10
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

当vue遇到老的项目启动和打包速度慢怎么办？ webpack-低版版本-编译启动速度和打包速度优化方案

qq_42389674的博客

02-27

5096

vue项目，vue-cli和webpack版本太低项目启动太慢如何优化，开启 terser-webpack-plugin 代码压缩，开启摇树优化，watchOptions 忽略node_modules，production 模式关闭 devtool的sourcemap,开启cache缓存,以及辅助工具webpack-bundle-analyzer，speed-measure-webpack-plugin，实现vue-cli低版本项目的启动和打包速度以及项目体积终极优化

Vue项目执行 npm run dev 报错解决方法

01-07

Vue项目执行 npm run dev 报错解决方法错误如下: Error: Cannot find module 'webpack-merge' at Function.Module._resolveFilename (module.js:440:15) at Function.Module._load (module.js:388:25) at Module....

10 条评论您还未登录，请先登录后发表或查看评论

vue-cli创建的项目npm run dev运行很慢

学习永无止境

01-20

4095

vue-cli创建的项目npm run dev刚开始运行正常，之后突然运行要花很长时间。后来发现是cnpm的原因。有次npm i装包的时候失败了，于是就用了cnpm i来装包，装包后再跑项目就很慢了。解决方法：删除node_modules文件，cnpm i重新安装包。 ...

npm run dev -- --host到底是干什么的？使用场景是什么？底层原理是什么？

最新发布

长风破浪会有时的博客

04-01

445

例如，当你在手机上通过浏览器访问你本地开发服务器的地址时，手机会向开发服务器所在的 IP 地址和端口发送 HTTP 请求，开发服务器接收到请求后，会将对应的页面内容返回给手机浏览器进行显示。参数时，开发服务器会将监听的主机地址修改为你指定的地址（如果没有指定具体地址，通常会监听所有可用的网络接口），这样其他设备就可以通过网络连接到这个服务器。，可以让同一局域网内的其他设备（如同事的电脑、测试人员的手机等）通过你的 IP 地址访问你本地的开发服务器，方便他们查看和测试你正在开发的功能。

npm 太慢

qq_40088463的博客

12-16

690

npm config set registry https://registry.npm.taobao.org npm install

执行指令npm run dev时卡进度的解决方法

chenfangqi7的博客

11-29

3217

执行指令npm run dev时卡进度的解决方法

关于vue的npm run dev和npm run build的区别介绍

10-17

在Vue项目中，我们经常会遇到两种常用的npm脚本命令：`npm run dev`和`npm run build`。这两个命令分别用于启动开发服务器和构建生产环境的应用程序。下面详细介绍一下这两个命令的区别。 1. npm run dev `npm run ...

详解Vue项目在其他电脑npm run dev运行报错的解决方法

12-11

并使用 npm run dev 或 npm run start 发生以下报错的解决方法。报错原因缺少 node_modules 里面的依赖。在项目目录下使用 npm install 然后再 npm run dev。如果在这一步当中， npm install 执行的过程中，...

vue 项目中 npm run dev 运行98% after emitting CopyPlugin 卡死

Ninewu的博客

06-10

3643

写项目时然后运行发现如下问题：试了删除node-modules 之后重新install 还是不行，后来在网上有人说他是 import 引入图片是空的，不能为空解决了这个问题我就在我的项目中找发现真的是这种问题 [外链图片转存中…(img-w36sILKf-1591783740865)] 我把地址改好之后重新启动就好了记录一下。 ...

若依VUE启动异常缓慢,一直卡住不动的2个原因解决方法

张子豪的博客

01-16

3317

全网都找不到怎么解决,于是我就仔细排查了一番

vue项目首屏打开速度慢的解决方法

12-07

最近接手了一个后台管理系统，技术栈主要是vue全家桶+elementui，老大打开测试环境页面的时候，说看到首页需要6秒钟，那如何进行优化呢？首先我们需要安装webpack-bundle-analyzer // webpack.prod.conf.js if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyz

Vue项目初次访问很慢解决方案

qq_43474235的博客

05-06

1563

发现页面首次加载，单文件体积4M多，加载时间需要31秒，导致用户体验非常差。打包后，dist文件20多兆。

npm run dev运行程序到40%不动了

qq_41820599的博客

01-08

2153

npm 运行程序一直卡在40%不动，一开始以为是网络的问题，不断地找解决方案。后来我发现原来是因为template下面需要有一个div根节点，有一个文件两个div并行了，所以程序陷入了死循环。

vue多页面热加载时速度慢

tf1450332301的博客

12-23

928

问题： vue多页面每次在npm run dev时都会在94%等待很久很久解决方法：方法一：参考 https://www.cnblogs.com/jwzhang/p/11126566.html 用了提升性能的插件方法二：参考https://blog.youkuaiyun.com/localhost_1314/article/details/85205322 在开发环境中按需加载和热更新 ...

vue 项目首次打开时加载速度很慢的优化方案

LonewoIf的博客

02-20

1万+

1、使用 vue-router 懒加载解决首次加载时资源过多导致的速度缓慢问题当你的 SPA（单页应用程序）变得很复杂时，打包构建后的 js 包会变得非常大，以至于严重影响页面的加载时间。vue-router 支持 webpack 内置的异步模块加载系统。所以，那些使用较少的路由组件不必打包进 bundles 里，只要在路由被访问时按需加载。懒加载路由写法： { path: "/base/u...

react flux的坑之（三） npm install 慢，或执行 npm instal之后run以后报错少包

lilyouyanglove的博客

07-27

2772

从githhub down了一个备忘录源码下来运行，所遇到的问题之一如下下载下来之后第一件事是下载依赖 npm install，因为github上一般不提交node_modules文件夹。 1、问题描述：执行npm install 后， npm run start 依然不成功 2、解决办法 npm install是下载node_modules文

vue项目加载慢优化

u012637258的博客

03-05

1701

1、vue-router懒加载懒加载的意思是当路由被访问的时候才加载对应组件，而不是在首页就全部加载，以此来提高首页反应速度。 component:require(["src/xx/xxx/xx.vue"], resolve) https://www.cnblogs.com/lijuntao/p/7777581.html 2、工程文件打包的时候不生成.map文件。 .map文件的作用是帮助编...

Vue项目卡顿慢加载？这些优化技巧告诉你！

热门推荐

web全栈开发的博客

06-30

1万+

前端开发是一个快速发展的领域，每天都会涌现出新的技术和工具。在实现功能的同时，开发人员面临着许多挑战如代码可维护性，加载时间,访问速度,构建速度等问题。这些挑战可能直接影响网站的性能和用户体验，需要采取一些优化措施来改善问题。在本文中，我们将探讨一些前端项目优化的具体措施，旨在帮助开发人员提高项目效率，升级用户体验。综合各方面来说就是。

npm run dev 启动时间很慢是为什么

02-07

### 可能的原因当 `npm run dev` 命令启动时间较慢时，可能由多种因素引起。一种常见的情况是由于缺少必要的全局命令配置，例如 Vite 或其他开发服务器未正确安装或路径设置不当[^1]。另一种可能是网络连接问题导致依赖项下载缓慢。这不仅影响首次安装的速度，还可能导致后续构建过程中的资源加载变慢[^2]。此外，模板结构错误也可能引发性能瓶颈。具体来说，在 Vue.js 项目中，如果 `<template>` 下存在多个根级元素，则可能会造成解析器陷入无限循环或是无法继续编译流程，从而使得进程停滞不前[^3]。还有可能出现 HTML 结构上的疏忽，比如有容器未能被适当标签包裹住，这也同样会阻碍正常的打包与服务启动过程[^4]。 ### 解决方案针对上述提到的各种可能性，可以采取如下措施：对于因环境变量缺失而导致的命令不可用问题，建议确认本地环境中是否已成功安装所需的工具链，并将其加入系统的 PATH 中去；如果是使用 Vite 构建的应用，那么可以通过重新初始化项目或者手动指定 Node Modules 的位置来修复这个问题。为了改善因为网速不佳所造成的延迟现象，更改 NPM 默认仓库至国内镜像站点是一个有效的办法。例如，可通过执行以下 Shell 指令切换成 Taobao NPM 镜像源： ```shell npm config set registry https://registry.npmmirror.com/ ``` 至于前端框架特有的逻辑缺陷——即多根节点的存在，应当调整组件内的 DOM 层次关系，确保每一个视图片段仅包含单一顶级容器。这样做既能提高渲染效率又能规避潜在的风险。最后，仔细审查页面布局代码，移除任何游离在外未经封装的内容区块，保证所有的子组件都被合法父级标签完全覆盖。这样做的好处是可以让 Webpack 等模块捆绑器更加顺畅地完成任务，进而加快整体响应速度。