Vue.js 卡在 40% 的服务如何恢复？

Posted 2023-02-22

【中文标题】Vue.js 卡在 40% 的服务如何恢复？

【英文标题】：Vue.js stuck on serving at 40% how to recover?

【发布时间】：2019-10-06 17:30:01

【问题描述】：

我决定删除节点模块文件夹，执行 npm install 然后执行 npm run serve 它总是卡在 40% 左右并永远停留在那里。从 UI 完成时，它也会卡在类似的数量上：

$ vue-cli-service serve --open --mode 开发 --https --dashboard INFO 正在启动开发服务器...

40% 建造 118/134 个模块 16 个活跃 ...tApp\node_modules\axios\lib\defaults.js

另一个时间：

40% 建造 134/147 个模块 13 个活跃 ...\node_modules\axios\lib\adapters\xhr.js

我注意到 Node.js 进程一直以 15% 左右的速度运行，但如果我等待，等待，等待，什么也不会发生。

包.json

  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "scripts": 
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit"
  ,
  "dependencies": 
    "@aspnet/signalr": "^1.1.4",
    "axios": "^0.18.0",
    "vue": "^2.6.10",
    "vue-axios": "^2.1.4",
    "vue-router": "^3.0.6",
    "vuex": "^3.1.1"
  ,
  "devDependencies": 
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-e2e-cypress": "^3.7.0",
    "@vue/cli-plugin-eslint": "^3.7.0",
    "@vue/cli-plugin-unit-jest": "^3.7.0",
    "@vue/cli-service": "^3.7.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.2.2",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.6.10"
  ,
  "eslintConfig": 
    "root": true,
    "env": 
      "node": true
    ,
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "rules": 
      "space-before-function-paren": [
        "error",
        
          "anonymous": "always",
          "named": "always",
          "asyncArrow": "always"
        
      ],
      "keyword-spacing": [
        "error",
        
          "after": true
        
      ],
      "semi": [
        "error",
        "always"
      ],
      "indent": "off",
      "vue/script-indent": [
        "warn",
        2,
        
          "baseIndent": 1
        
      ]
    ,
    "parserOptions": 
      "parser": "babel-eslint"
    
  ,
  "postcss": 
    "plugins": 
      "autoprefixer": 
    
  ,
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "jest": 
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "vue"
    ],
    "transform": 
      "^.+\\.vue$": "vue-jest",
      ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
      "^.+\\.jsx?$": "babel-jest"
    ,
    "moduleNameMapper": 
      "^@/(.*)$": "<rootDir>/src/$1"
    ,
    "snapshotSerializers": [
      "jest-serializer-vue"
    ],
    "testMatch": [
      "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
    ],
    "testURL": "http://localhost/"
  

$ 节点 --version v10.15.3

我该如何恢复？

更新： 数字 40 有一些神奇之处，我删除了所有提到 Axios 的内容，现在我仍然卡在 40%，但有不同的东西：

40% 建造 133/146 个模块 13 个活跃 ...abel\runtime-corejs2\core-js\promise.js

【问题讨论】：

尝试卸载重装vue-cli?

你找到答案了吗？我和你有同样的问题

【参考方案1】：

就我而言：

这是模板中的错误。 确保后面有一个容器标签 <template><container_tag> ... your code ...</container_tag></template> 可以像 <div> 一样简单

【讨论】：

你拯救了这一天。如果模板没有正确完成，没有看到任何错误会发疯。谢谢。

这是一个非常有用的答案，因为在运行 npm run watch 或 npm run dev 时，它只会冻结并且不会给出任何真正有意义的错误消息。

【参考方案2】：

尝试运行npm run lint，看看您的代码中是否有错误。

我不小心将 v-bind:attribute 留空，例如<el :items=""></el>。解决后，我就可以构建/服务了。

【参考方案3】：

// vue.config.js
module.exports = 
  chainWebpack: (config) => 
    config.resolve.symlinks(false)
  

链接：https://cli.vuejs.org/guide/troubleshooting.html#running-installation-enter code herewith-sudo-or-as-root

【参考方案4】：

就我而言：

git 冲突在组件中留下了>>>>>> master，导致它无法编译

【讨论】：

确实 - 未解决的 git 冲突总是将开发服务器停止在 40%。值得一提。

【参考方案5】：

我的情况是：

git 冲突 标签没有完全关闭它就像<div> ..... </div但是vs代码没有显示这个错误。当我打开每个组件时，它突出显示了错误

【参考方案6】：

检查所有组件是否存在合并冲突。 如果您使用的是 vscode，请尝试在您的项目文件夹中搜索字符串 >>>>>。

【参考方案7】：

这似乎是由您的一个项目文件中的错误引起的，该错误会阻止编译并压缩任何错误消息。

今天我个人对此感到困扰，并且在发现我的一个组件中的错误之前花了很多时间不必要地调试 WSL。

尝试注释掉或删除模板、组件注册和导入中的任何组件，直到它再次开始加载。

【参考方案8】：

我在发球前运行了一个 linter，发现它纠正了其中一个文件。它仍然没有运行。但我决定浏览该文件，发现缺少一个结束标记。

这会很乏味，但请查看您的组件，看看您是否缺少结束标记。

我还发现检查数字暂停的第一个位置并将其用作缩小问题文件范围的方法有助于我更快地解决问题。

40% building 223/268 modules 45 active ...rders\List.vue?

【参考方案9】：

就我而言，其中一个环境变量没有定义。在我使用 Webpack DefinePlugin 定义它之后，它又开始工作了。在这种情况下看到实际错误而不是构建过程挂起会很棒。

【参考方案10】：

我通过添加.eslintignore 文件解决了这个问题。因为我在项目中直接使用了一个大包装的第三方模块。

【参考方案11】：

这很可能是由于您的源文件中的错误。在我的例子中，我首先在 main.js 中删除了一个已删除组件的导入，然后从两个组件中删除了一些 <style> 标签（vue 禁止在模板中具有副作用的标签）。它还可能有助于监视正在处理的最后一个文件，以获取有关查看位置的线索。

【参考方案12】：

我没有遗漏任何标签，但我已从脚本中的数据部分复制到 v-if 标签（以确保我正确拼写数据变量）并且我不小心留下了 : 而没有更改它到=。

如果您遇到此问题，则可能需要检查其他问题。很难看到！但是通过删除一段代码，我一次又一次地把它归零。