npm run serve 运行时卡在 40% [英] npm run serve get stuck on 40% while running

问题描述

具体来说，我已经有几周时间在研究 Vue js 项目 Vuetify.我使用 npm run serve 命令来构建和运行一个实时服务器.它运行良好，一切正常，但突然我再次运行我的项目，Boom 无法再构建它，它卡住了 40%，而不会抛出任何错误或错误.我想知道你们是否有和我一样的问题，或者你知道如何解决这个问题.提前致谢.

It’s been a couple of weeks that I’m working on a Vue js project Vuetify to be specific. I use npm run serve command to build and run a live server. it was working fine everything was okay but suddenly I run my project again and boom can’t building anymore it gets stuck 40% without throwing anything as a bug or an error. I wanna know guys if you had similar issue like mine or if you know how to troubleshoot this issue. thank in advance.

我正在使用 npm 6.9.0 、node v10.16.0 和 vue 3.9.2

I'm using npm 6.9.0 , node v10.16.0 and vue 3.9.2

package.json

package.json

{
  "name": "mycode",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "core-js": "^2.6.5",
    "fuse.js": "^3.4.5",
    "moment": "^2.24.0",
    "vue": "^2.6.10",
    "vue-axios": "^2.1.4",
    "vue-i18n": "^8.12.0",
    "vue-router": "^3.0.3",
    "vue-table-component": "^1.9.2",
    "vuelidate": "^0.7.4",
    "vuetify": "^1.5.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.9.0",
    "@vue/cli-plugin-eslint": "^3.9.0",
    "@vue/cli-service": "^3.9.3",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "live-server": "^1.2.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "typescript": "^3.5.3",
    "vue-cli-plugin-vuetify": "^0.5.0",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.3.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

推荐答案

有时在编译过程中会出现某些错误.例如，假设我有一个包含以下模板的组件

Sometimes during the compiling process certain errors occur. For example say I have a component with a template that contains the following

<template>
  <imagingheader></imagingheader> 
  <router-view ></router-view>
</template>

现在这张照片有什么问题?

Now what is wrong with this picture?

模板中有两个基本元素.在编译过程中，这将阻止它继续前进，遗憾的是服务器不会开始显示此错误.将两个元素移动到一个公共 div 标签中可以解决这个问题，并将编译过程从 40% 移动到 100%.

There are two base elements in the template. During the compiling process this will prevent it from going any further and sadly the server does not start to display this error. Moving the two elements into a common div tag fixes the issue and moves the compling process from 40% to 100%.

这篇关于npm run serve 运行时卡在 40%的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！