跟随博客教程操作时npm run dev报缺失dev脚本如何解决

问题现象 #

跟随博客教程开发项目时，执行npm run dev无法正常启动，终端输出报错：

candicetomkins@Candys-Air ~/Desktop/cms-blog $ npm run dev                                       [ruby-2.6.8p205]
npm ERR! Missing script: "dev"
npm ERR! 
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/candicetomkins/.npm/_logs/2022-06-27T15_49_33_958Z-debug-0.log

项目内package.json配置如下，确认已经配置了dev脚本：

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "latest",
    "react": "18.1.0",
    "react-dom": "18.1.0"
  },
  "devDependencies": {
    "@types/node": "17.0.35",
    "@types/react": "18.0.9",
    "@types/react-dom": "18.0.5",
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.2",
    "typescript": "4.7.2"
  }
  
}

故障原因&对应解决步骤 #

这类报错本质是npm在当前执行目录下没找到带dev脚本的package.json配置，按优先级排查以下问题：

• 终端当前工作目录错误：这是最高发的原因。你当前终端路径显示在~/Desktop/cms-blog，但要确认你贴的这份带dev脚本的package.json是否真的存放在这个路径的根目录。很多人跟着教程初始化项目时，会在当前目录下自动生成一层子项目文件夹，比如实际项目文件都在cms-blog/my-blog路径下，终端停在外层目录执行命令就会找不到脚本。直接在终端执行ls查看当前目录文件列表，确认能直接看到package.json文件后再执行启动命令。
• 未执行依赖安装：如果你创建完package.json后从来没跑过依赖安装命令，也可能触发脚本识别异常。先执行npm install，等所有依赖（包括next.js相关依赖）安装完成后，再尝试执行npm run dev。
• 本地文件异常：如果确认目录正确、依赖也装过，先检查本地实际保存的package.json有没有语法错误（比如漏写括号、多余逗号），你贴出来的内容格式是正确的，但要确认本地保存的文件和贴出的内容一致。如果格式没问题，删掉项目下的node_modules文件夹和package-lock.json文件，重新执行npm install安装依赖后再启动。
• 多配置文件冲突：检查当前目录的上层路径、子路径有没有其他package.json文件，避免npm识别到错误的配置文件，执行命令时必须切到存放正确package.json的项目根目录。

注：你贴的package.json里的scripts配置本身没有问题，不需要修改脚本内容，优先排查目录问题即可。

内容的提问来源于stack exchange，提问作者CTDev