npm run serve 一直卡在40%

最新推荐文章于 2023-08-18 15:32:26 发布
最新推荐文章于 2023-08-18 15:32:26 发布
阅读量545 收藏 2
点赞数 2
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44196222/article/details/125581190
版权

在这里插入图片描述
在这里插入图片描述
用图形化界面运行也是一直在building不报错误。

出现错误原因：template写了多个根元素
template里面只能有一个根元素
template里面只能有一个根元素
template里面只能有一个根元素

前端执行npm run serve，执行到一半卡住的解决办法（全）
码农研究僧的博客
03-20 3619
前端执行npm run serve，执行到一半卡住的解决办法
npm run serve 运行过程
liubangbo的专栏
05-30 3618
之前文章分析过vue-cli创建工程项目过程Vue-cli(3.0 + ) 源码分析(一)_夜跑者的博客-优快云博客_vue-cli源码 这篇文章看看我们经常运行的命令 npm run serve执行过程。 1. 脚本从哪里来 package.json中scripts字段定义脚本命令。scripts字段是一个对象，它的每一个属性，对应一段脚本。如下所示： "scripts": { "serve": "vue-cli-service serve ", "build": "vue
npm run serve 卡在40%
qq_29864549的博客
05-07 615
如图，在运行时，一直在40卡住，网上的办法有删除一些文件的也都不行，然后发现在template标签中没有div容器 加上之后就能果断运行
npm run serve 运行卡在40%
weixin_43859511的博客
08-19 952
原因：ESLint: The template root requires exactly one element.(vue/valid-template-root) 因为我使用的是webstorm工具，所以提示了这个，但是由于我看到了eslint，我起初还以为是这个工具原因。直到后来找到解决办法在发现我是个傻的。 解决办法： 加个div标签 ...
vue 中npm run serve 执行一半卡死；40%过不去
weixin_47553901的博客
07-15 916
vue 编译40%卡住 原因之一： template下只能有一个子元素！而我写了2个。
npm run serve运行程序到40%不动了
weixin_48912846的博客
04-01 2265
npm 运行程序一直卡在40%不动，一开始以为是网络的问题，不断地找解决方案。发现把网线，关闭vscode都不行。 后来我发现原来是因为template下面需要有一个div根节点，有一个文件两个div并行了，所以程序陷入了死循环。 ...
vue 中npm run serve 执行一半卡死；40%过不去 [转载]
geidongdong的博客
11-27 2546
原因：modules缺少相关依赖 解决办法：重新下载依赖，npm会下载缺失的依赖项。 执行 npm install 命令 自己找找代码，是代码原因： template下只能有一个子元素！而我写了2个。 修改删除后，重新执行 npm run serve 恢复正常了。 ...
解决vue项目运行npm run serve报错的问题
01-18
先来一张报错的截图 先去配置环境变量 C:\Users\lgd\AppData\Local\Programs\Microsoft VS Code\bin的后面配置 ；%SystemRoot%\system32;...补充知识：vue npm run serve报错Cannot find module ‘eslint-plugin
npm run serve/build 背后的真实操作
热门推荐
奔跑的痕迹的博客
02-28 1万+
vue CLI 用起来的确很舒服，方便省事，但他经过层层封装很难明白，执行完那个npm run serve/build 后他都干了些什么，甚至不知道整个项目是怎么跑起来的，今天自己抽时间就去瞅瞅,为加深记录特此记录记录 文章目录一、探寻npm run 背后的真实操作1、看看 npm run serve2、仿造一个serve2-1. 创建测试文件夹2-2. 在 node_modules\.b...
npm run serve 和 npm run dev
weixin_49456013的博客
10-30 2315
作为一个后端开发人员，对前端知识只只皮毛，很多时候都是比葫芦画瓢，原理一点也不知。 写这篇文章的原因，还要从开始的新前端项目说起，从SVN检出项目，第一步运行一下，开始比葫芦画瓢，尴尬了，运行不了，开始查找原因。。。 ...
npm run serve卡着38%加载不下去
weixin_43716338的博客
03-30 906
如图，script标签多了一个setup导致。
运行vue项目,building modules卡住不动
qq_40837750的博客
05-10 5391
是
node安装webpack一直卡着不动 解决方案
namesocool的博客
03-13 3403
我遇到这个问题 ： 起初以为没有网络，但是经过反复检查发现问题原因出在： node 的版本问题上： 解决方法：1.npm install -g npm 升级npm 2.npm cache clean -f 清缓存 3.npm install -g w...
使用werStorm终端运行vue项目的时候出现[38%] building (29/199 modules)，一直卡住不动，也没报错
qq_39562831的博客
08-18 866
后来查看了最近修改的代码果然发现问题，问题解决，我的是<img :src="">,我就是这么写的里面也没有变量就出现了问题，后来修改了<img :src="data.Img">,问题就解决了。代码更新时，版本发生冲突了。或者是修正某处代码，发生冲突了，由于编译错误而引起的。后来查了资料，原来是。
vue cli2.0 npm run dev 报错10% building modules 1/1 modules 0 activeevents.js:200 throw er；
不二喵老师
05-07 596
报错如下： 起因是我需要局域网内调试 将 host 写成了 局域网的ip地址，但现在连接的是 网线。ip出现改变，遂报错。 解决办法： 找到自己的ip 替换之前的 host ip 。
解决报错10% building 2/5 modules 3 active node版本问题
lgnorantpony的博客
03-29 2968
在npm run dev 时候出现问题 查明是版本问题，为了不替换node版本找到了一个方法。在package.json文件下 将原来的。--------方法如下。
npm install 下载依赖包报错以及安装npm install node-sass --save 报错的问题--这里肯定有你想要的答案
南下有你
02-06 8222
1.第一步下载依赖包：npm install ,或者下载淘宝镜像，第一步命令：npm install -g cnpm --registry=https://registry.npm.taobao.org，第二步：cnpm install 注意:这里将将会用：cnpm，测试的 2.安装到最后就会显示以下报错信息： | [10/71] Installing readable-stream@^2.0.1platform unsupported sass-loader@6.0.6 › webpack@3.6.0 ›
F:\software\java\SS\admin>npm run serve > mas-creator-admin@0.1.0 serve F:\software\java\SS\admin > vue-cli-service serve INFO Starting development server... 11% building 9/16 modules 7 active ...utils\sendMessage.jsBrowserslist: caniuse-lite is outdated. Please run the following command: `npm update` 40% building 39/49 modules 10 active ...nycode\punycode.jsDeprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. More info: https://sass-lang.com/d/legacy-js-api Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0. More info and automated migrator: https://sass-lang.com/d/import ╷ 9 │ @import "~element-ui/packages/theme-chalk/src/index"; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ stdin 9:9 root stylesheet Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. More info: https://sass-lang.com/d/legacy-js-api 40% building 114/161 modules 47 active ...pi\dist\index.jsDeprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. More info: https://sass-lang.com/d/legacy-js-api Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. More info: https://sass-lang.com/d/legacy-js-api
最新发布
04-19
### 解决方案 在 Vue CLI 项目中运行 `npm run serve` 遇到的 Sass `@import` 和 Legacy JS API 弃用警告问题，通常是由以下几个原因引起的： #### 1. **Vue CLI Service未正确安装** 如果提示 `'vue-cli-service' 不是内部或外部命令...`，这表明全局环境中缺少 `@vue/cli-service` 或者本地依赖未正确安装。可以通过重新安装依赖来解决问题[^1]。 ```bash rm -rf node_modules package-lock.json npm install ``` #### 2. **Legacy JS API 报错** Dart Sass 已经宣布弃用旧版 JavaScript API，并将在未来的版本中移除它。当前使用的 `node-sass` 是基于 LibSass 的实现，而 LibSass 正逐渐被淘汰。因此建议切换至 Dart Sass 实现的 `dart-sass` 或 `sass` 包[^3]。 ##### 替换 `node-sass` 为 `sass` 执行以下命令卸载 `node-sass` 并安装新的 `sass` 包： ```bash npm uninstall node-sass --save-dev npm install sass --save-dev ``` 此操作会将项目的 Sass 编译器替换为更现代化的 Dart Sass 版本，从而消除关于 Legacy JS API 的弃用警告[^4]。 #### 3. **临时禁用弃用警告** 如果你暂时无法迁移至新 API，可以配置 `silenceDeprecations` 参数以隐藏这些警告消息。通过修改 Webpack 配置文件（通常是 `vue.config.js`），添加如下设置： ```javascript module.exports = { css: { loaderOptions: { sass: { implementation: require('sass'), sassOptions: { silenceDeprecationWarnings: ['legacy-js-api'] } } } } }; ``` 注意：这种方法仅适用于短期解决方案；长期来看仍需完成向现代 API 的过渡。 #### 4. **检查 SASS 导入路径** 对于 `@import` 使用中的潜在错误，请确认所有样式文件均采用正确的相对/绝对路径引用方式。推荐逐步升级至 CSS Modules 或 PostCSS 插件作为替代手段减少对传统导入语法的依赖。 --- ### 示例代码调整后的 Webpack 配置 (vue.config.js) ```javascript const { defineConfig } = require('@vue/cli-service'); const dartSass = require('sass'); module.exports = defineConfig({ transpileDependencies: true, css: { loaderOptions: { sass: { implementation: dartSass, // Use dart-sass instead of node-sass sassOptions: { includePaths: ['./src/styles'], // Add custom paths here if necessary silenceDeprecationWarnings: ['legacy-js-api'] // Suppress warnings temporarily }, }, }, }, }); ``` --- ### 总结 综上所述，要彻底解决该类问题需要更新构建工具链并适配最新的编译环境。具体措施包括但不限于更换 Sass 处理库以及优化资源加载逻辑等环节。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱写bug的小邓程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值