根本原因是WebStorm未将package.json识别为JSON文件，需在Settings→Editor→File Types中为JSON类型添加*.json模式，重启或重载项目后即可显示npm脚本列表。
npm scripts在WebStorm里不显示或报“Please specify npm scripts to run”
根本原因是WebStorm没把package.json识别为JSON文件，导致无法解析scripts字段。这不是项目问题，是IDE配置缺失。
- 进
File → Settings → Editor → File Types - 在右侧列表找到
JSON，点击它 - 在
File name patterns区域里加一行：*.json - 点OK保存，重启WebStorm或重载项目
改完后右键项目根目录的 package.json → Open With → JSON Editor，能正常打开就说明生效了；再点 Run → Edit Configurations 就能看到 npm 脚本列表了。
npm run dev / serve 启动失败：端口被占、依赖缺失或node-sass兼容性
报错如 Error: listen EADDRINUSE: address already in use :::8080 或 Cannot find module 'vue'，多数不是代码问题，而是环境状态异常。
- 端口冲突：直接运行
npm run dev -- --port 8081快速绕过；长期用就加vue.config.js：
module.exports = {
devServer: {
port: 8081,
open: true
}
}- 依赖不全：删掉
node_modules和package-lock.json，再跑npm install - node-sass 报错（比如
PostCSS received undefined instead of CSS string）：优先降级适配，例如：
npm uninstall node-sass sass-loadernpm install node-sass@4.14.1 sass-loader@8.0.0
立即学习“前端免费学习笔记（深入）”；
注意：Vue 2 + webpack 4 项目基本要锁定这两个版本，新版 node-sass 不兼容旧构建链。
WebStorm里npm命令执行报错：权限、镜像或Node版本不匹配
常见现象是 npm i 卡住、报 EPERM、或提示 vue-cli-service not found —— 很可能不是脚手架坏了，而是执行上下文不对。
- Windows下WebStorm未以管理员身份运行，尤其当全局安装过
vue-cli但路径在C:\Program Files时，会因权限拒绝访问 - 镜像源失效：运行
npm config get registry看是否还是https://registry.npmjs.org/；国内建议切淘宝源：npm config set registry https://registry.npm.taobao.org - Node版本太高（如v20+）导致
vue-cli-service启动失败：Vue CLI 4.x 官方支持上限是 Node v16；可装nvm切到v16.20.2再试 - 如果报
openssl-legacy-provider相关错误，在package.json的scripts里加前缀：
"dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve"（Windows）"dev": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve"（macOS/Linux）
WebStorm内存溢出崩溃或ESLint满屏报错
不是项目写错了，是IDE资源分配或语言服务没对齐。尤其大项目+Vue 2 + Webpack，WebStorm默认内存和语法解析器容易扛不住。
- 内存溢出（报
java.lang.OutOfMemoryError）：在Help → Change Memory Settings把堆内存提到2048MB；或者更稳妥地，在package.json加脚本：
"fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"
然后运行 npm run fix-memory-limit（需先 npm install increase-memory-limit cross-env）
- ESLint持续报错（如 “Missing semicolon”），但代码没问题：进
Settings → Languages & Frameworks → JavaScript → Code Quality Tools → ESLint，把Automatic ESLint configuration关掉，手动指定项目根目录下的.eslintrc.js路径 - Vue单文件组件里
<template>标签不识别、无高亮：检查Settings → Editor → File Types，确认*.vue已关联到Vue.js类型（不是纯Text）
这些配置项一旦设错，WebStorm不会主动提醒，但会静默降级处理——所以满屏红波浪线，往往不是你写错了，而是它压根没按Vue规则去解析。
