npm run dev 不会结束

【问题标题】：npm run dev won't come to an endnpm run dev 不会结束
【发布时间】：2020-11-18 09:10:27
【问题描述】：

我正在尝试在 laravel 项目中使用 vue。我遵循了正确的步骤：

  1. 我运行 composer require laravel/ui
  2. 我跑了 php artisan ui vue
  3. 我在我的主布局文件 app.blade.php 中包含了
  4. 我跑了 npm run dev

但是当我访问我的站点时，该组件没有显示，并且我在浏览器的控制台中收到一条错误消息：

Uncaught ReferenceError: Vue is not defined

然后经过一番搜索，我还注意到“npm run dev”在我的 cmd 窗口中并没有结束。它说：

DONE Compiled succesfully in 4465ms
Your application is running here: http://localhost:8080

我只能用 Control-C 来阻止它。

所以我的假设是浏览器中没有定义 vue，因为 npm run dev 没有结束。

我已经完成了安装 vue 的所有步骤，但没有任何变化。

>>>>>>>>>>>>>>>>>>>>>>> > 显然我的 package.json 文件是错误的。它看起来像这样：

{
"name": "forum",
"version": "1.0.0",
"description": "Forum",
"author": "Hubert van Dongen <hmd19570@gmail.com>",
"private": true,
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "test": "npm run unit",
    "build": "node build/build.js"
},
"dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
},
"devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "bootstrap": "^4.0.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "jquery": "^3.2",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "popper.js": "^1.12",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "resolve-url-loader": "^2.3.1",
    "rimraf": "^2.6.0",
    "sass": "^1.20.1",
    "sass-loader": "^8.0.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue": "^2.5.17",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
},
"engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
},
"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
]

}

我所做的是创建一个新的 laravel 项目并将 package.json 文件从该项目复制到我的论坛项目。它看起来像这样：

{
"private": true,
"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
    "axios": "^0.19",
    "cross-env": "^7.0",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.19",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.15.2",
    "sass-loader": "^8.0.0"
}

}

我希望这个 package.json 可以与 npm run dev 一起运行。但是，当我从我的论坛文件夹中运行“npm run dev”时，我得到了一堆错误：

C:\xampp\htdocs\forum>npm run dev

> @ dev C:\xampp\htdocs\forum
> npm run development


> @ development C:\xampp\htdocs\forum
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

'cross-env' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\hmd\AppData\Roaming\npm-cache\_logs\2020-07-29T20_13_07_867Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\hmd\AppData\Roaming\npm-cache\_logs\2020-07-29T20_13_07_893Z-debug.log

>>>>>>>>>>>>>>>>>>>>>>> >>>>>>>>>> 我运行了“npm install --save-dev cross-env”，然后又运行了“npm run dev”。结果很遗憾：

C:\xampp\htdocs\forum>npm run dev

> @ dev C:\xampp\htdocs\forum
> npm run development


> @ development C:\xampp\htdocs\forum
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

The system cannot find the path specified.
events.js:287
      throw er; // Unhandled 'error' event
      ^

Error: spawn node_modules\webpack\bin\webpack.js ENOENT
    at notFoundError (C:\xampp\htdocs\forum\node_modules\←[4mcross-spawn←[24m\lib\enoent.js:6:26)
    at verifyENOENT (C:\xampp\htdocs\forum\node_modules\←[4mcross-spawn←[24m\lib\enoent.js:40:16)
    at ChildProcess.cp.emit (C:\xampp\htdocs\forum\node_modules\←[4mcross-spawn←[24m\lib\enoent.js:27:25)
←[90m    at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)←[39m
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess.cp.emit (C:\xampp\htdocs\forum\node_modules\←[4mcross-spawn←[24m\lib\enoent.js:30:37)
←[90m    at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)←[39m {
  code: ←[32m'ENOENT'←[39m,
  errno: ←[32m'ENOENT'←[39m,
  syscall: ←[32m'spawn node_modules\\webpack\\bin\\webpack.js'←[39m,
  path: ←[32m'node_modules\\webpack\\bin\\webpack.js'←[39m,
  spawnargs: [
    ←[32m'--progress'←[39m,
    ←[32m'--hide-modules'←[39m,
    ←[32m'--config=node_modules/laravel-mix/setup/webpack.config.js'←[39m
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\hmd\AppData\Roaming\npm-cache\_logs\2020-07-30T19_26_43_340Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\hmd\AppData\Roaming\npm-cache\_logs\2020-07-30T19_26_43_370Z-debug.log

比我了解更多的人有什么建议吗？

胡贝特

【问题讨论】：

  • 你能检查一下实际运行的是什么 npm 脚本吗？据我所知，默认的github.com/laravel/laravel/blob/master/package.json 不应该运行实际的节点应用程序。
  • 我不确定您的确切意思。但我的 package.json 包含行 "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  • 你试过npm install吗？请分享您的app.js
  • app.js 包含：require('./bootstrap'); window.Vue = require('vue'); Vue.component('example-component', require('./components/ExampleComponent.vue').default); const app = new Vue({ el: '#app', });
  • 你在php artisan ui vue之后运行npm install了吗？

标签： php laravel vue.js


【解决方案1】：

尽管您提出了很好的建议，但遗憾的是问题仍未得到解决。但我在这个过程中学到了很多东西。

我决定从头开始重建项目。

亲切的问候，

胡贝特

【讨论】：

    【解决方案2】：

    开发服务器应该一直运行，直到你明确地杀死它。它无法判断您何时完成工作并且不会再向它发出任何请求。

    当您运行开发服务器时，您的 PHP 是无关紧要的（除非您在 PHP 中编写单独的 Web 服务）。您连接到http://localhost:8080，而不是运行您的 PHP 的任何服务器，就像命令行上的说明告诉您的那样。

    如果您想进行生产部署并在 PHP 生成的 HTML 文档中运行 Vue 应用程序，那么follow the instructions on the Vue website。

    【讨论】：

    • 我只是按照 laracast 视频中的步骤进行操作（Let's build a forum 的第 29 集）。在视频中“npm run dev”完成，vue 组件按预期工作。
    • 我不会追查并观看视频来确定您是否误解了它或是否有误。
    • 哪里有开发服务器？据我所知，Laravel 附带的 package.json 不应该启动任何服务器。两周前，我在（当时）最新版本上从头开始创建了一个项目，还使用 ​​laravel/ui 和 vue。
    • @Flame — 问题是运行 run dev 脚本后的 Your application is running here: http://localhost:8080。
    • @Quentin 是的，你是对的，显然 OP 运行的 npm run dev 脚本与 Laravel 附带的脚本不同......
    猜你喜欢
    • 1970-01-01
    • 2023-02-03
    • 2018-05-05
    • 1970-01-01
    • 2021-01-31
    • 2020-11-17
    • 2019-01-09
    • 1970-01-01
    • 2018-09-07
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode