NPM服务器维修,npm run dev无法启动服务器

在尝试使用npm run dev启动服务器时遇到问题,预期应打开http://127.0.0.1:8000,但未成功。已尝试npm start可以正常工作。项目依赖包括npm@6.4.1, node@v10.13.0, webpack@4.20.2等。配置文件中包含webpack.config.js,可能需要检查配置或运行其他脚本来启动服务器。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我正在尝试执行“ npm run dev”,但它没有启动服务器。我以为应该打开http://127.0.0.1:8000。我如何做到这一点? “ npm start”工作并转到我的本地主机。我在寻找答案,但找不到任何东西。如果有人可以帮助我或为我提供答案的链接,我将不胜感激。我是新来的。谢谢。如果有帮助:

npm -v

6.4.1

节点-v

v10.13.0

webpack -v

4.20.2

package.json:

{

"name": "cocos-skeleton",

"description": "",

"version": "1.0.0",

"main": "main.js",

"author": "",

"license": "UNLICENSED",

"private": true,

"repository": {

"type": "git",

"url": ""

},

"scripts": {

"lint": "cross-env eslint src",

"test": "cross-env jest --passWithNoTests",

"test:watch": "cross-env jest --passWithNoTests --watch --notify",

"test:coverage": "cross-env jest --coverage",

"config": "cross-env webpack --config tools/webpack/webpack.config.js",

"bundle": "cross-env npm run config -- --mode production",

"bundle:watch": "cross-env npm run config -- --mode development --watch --progress --display-error-details",

"compile": "cross-env cocos compile",

"start": "cross-env cocos run",

"dev": "cross-env npm run bundle:watch & npm run start",

"refresh": "cross-env npm run compile && npm run start",

"release": "cross-env cocos run -m release"

},

"husky": {

"hooks": {

"pre-commit": "lint-staged"

}

},

"lint-staged": {

"linters": {

"*.js": [

"eslint --fix",

"jest --bail --findRelatedTests",

"git add"

]

},

"ignore": [

"**/frameworks/**/*.js"

]

},

"dependencies": {

"@babel/polyfill": "^7.0.0",

"howler": "^2.0.15",

"lodash": "^4.17.11",

"prando": "^3.0.3"

},

"devDependencies": {

"@babel/core": "^7.0.0",

"@babel/plugin-proposal-class-properties": "^7.0.0",

"@babel/preset-env": "^7.0.0",

"babel-core": "^7.0.0-bridge.0",

"babel-eslint": "^8.2.3",

"babel-loader": "^8.0.0",

"babel-plugin-lodash": "^3.3.4",

"cross-env": "^5.2.0",

"eslint": "^5.6.1",

"eslint-config-airbnb-base": "^13.1.0",

"eslint-plugin-import": "^2.14.0",

"husky": "^1.1.0",

"jest": "^23.6.0",

"lint-staged": "^7.3.0",

"lodash-webpack-plugin": "^0.11.5",

"prettier-eslint": "^8.8.2",

"webpack": "^4.20.2",

"webpack-cli": "^3.1.2"

},

"eslintConfig": {

"parser": "babel-eslint",

"extends": "airbnb-base",

"globals": {

"cc": true,

"ccui": true

},

"env": {

"browser": true,

"jest": true

},

"rules": {

"func-names": [

"error",

"as-needed"

],

"no-console": [

"error",

{

"allow": [

"warn",

"error",

"assert"

]

}

],

"complexity": [

"error",

5

],

"max-params": [

"error",

5

],

"max-depth": [

"error",

4

],

"max-statements": [

"error",

20

],

"max-lines-per-function": [

"error",

50

],

"max-classes-per-file": [

"error",

1

],

"max-nested-callbacks": [

"error",

3

],

"max-statements-per-line": [

"error",

{

"max": 1

}

]

}

},

"jest": {

"bail": true,

"coverageThreshold": {

"global": {

"branches": 0,

"functions": 0,

"lines": 0,

"statements": 0

}

},

"collectCoverageFrom": [

"src/**/*.js"

],

"moduleNameMapper": {

"^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|cur)$": "/src/lib/mocks/FileMock.js"

}

},

"babel": {

"presets": [

[

"@babel/preset-env",

{

"useBuiltIns": "usage",

"targets": {

"ie": "11"

}

}

]

],

"plugins": [

"@babel/plugin-proposal-class-properties"

]

},

"prettier": {

"singleQuote": true,

"trailingComma": "all",

"printWidth": 100

}

}

webpack.config.js:

const { join } = require('path');

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

const { dependencies } = require('../../package.json');

const sourcePath = join(`${__dirname}/../../src`);

module.exports = {

entry: { main: './src/index.js', vendor: Object.keys(dependencies) },

optimization: { splitChunks: { name: 'vendor', minChunks: 2 } },

module: {

rules: [

{

test: /\.js$/,

include: sourcePath,

loader: 'babel-loader',

options: {

presets: [

[

'@babel/preset-env',

{

useBuiltIns: 'usage',

targets: {

ie: 11,

},

},

],

],

plugins: ['@babel/plugin-proposal-class-properties', 'lodash'],

},

},

],

},

plugins: [new LodashModuleReplacementPlugin()],

};

### 解决 `npm run dev` 命令无法启动服务器的问题 当执行 `npm run dev` 并遇到类似于 "Error: listen EADDRINUSE :::8080" 的端口占用错误时,这表明目标端口号已经被另一个进程所使用[^1]。 #### 方法一:更改默认端口配置 如果端口冲突是由于其他应用程序占用了相同端口,则可以尝试修改项目中的端口设置。对于许多基于 Node.js 的框架来说,在项目的根目录下查找并编辑环境变量文件 `.env` 或者在启动脚本中指定不同的端口: ```bash PORT=9090 npm run dev ``` 这种方法允许开发者快速切换到未被使用的端口上运行服务。 #### 方法二:终止已存在的进程 另一种方法是在操作系统层面找到正在监听该端口的服务,并将其关闭。以 Linux 和 macOS 为例,可以通过以下命令来识别和结束占用特定端口 (如 8080) 的程序: ```bash lsof -i :8080 | awk '{print $2}' | tail -n +2 | xargs kill -9 ``` 此操作会强制停止所有绑定至 8080 端口上的活动连接,从而让新的实例能够顺利接管这个端口资源。 #### 方法三:调整防火墙/安全组规则 有时即使解决了本地端口冲突问题,仍然可能会因为网络权限不足而导致外部设备无法访问开发服务器。此时应该检查计算机系统的防火墙设置以及云服务商的安全组策略,确保相应的入站流量已被允许通过[^2]。 #### 方法四:使应用可从局域网内访问 为了使得由 `npm run dev` 启动的应用可以从同一个 Wi-Fi 下的不同机器上浏览,通常需要将 Webpack Dev Server 配置为公开模式(`host: '0.0.0.0'`),而不是仅限于localhost(即`127.0.0.1`). 这样做可以让任何连在同一网络内的客户端都能成功请求API接口或静态页面. ```javascript // webpack.config.js 中的部分配置项 module.exports = { // ... devServer: { host: '0.0.0.0', // 绑定所有可用IP地址 port: process.env.PORT || 8080, allowedHosts: [ '.example.com' ] } }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值