WebStorm本身不构建或发布网页，仅调用package.json中的build脚本（如"build": "vite build"），需确保脚本存在、Node.js路径正确、工具链已安装，并通过npm工具窗口运行；产物在dist目录，须用vite preview等HTTP服务预览。
WebStorm 本身不直接“构建并发布网页”，它是个 IDE，不是 CI/CD 工具或部署服务；真正完成构建和发布的，是你项目里的 package.json 脚本、构建工具（如 Vite、Webpack）和你手动或自动化执行的命令。WebStorm 的作用是帮你写对脚本、配好环境、一键触发、看清日志、避免路径或解释器错配导致构建失败。
新建项目时选错模板，package.json 就不会自动生成
很多人点开 New Project 后直接填路径、点 Create，结果得到一个空文件夹——没有 package.json，也没有 node_modules，后续所有构建命令（npm run build）都会报 command not found 或 no script named "build"。
- 必须在新建项目对话框左侧明确选择技术栈：比如 Vue 项目选
Vue CLI或Vite，React 项目选React，纯静态页可选HTML（但不会带构建能力） - 右侧模板要匹配你的真实需求：Vite 模板默认含
build脚本，而旧版 Vue CLI 模板可能用npm run build，Create React App 则是npm run build输出到build/目录 - 如果误建了空项目，补救方式是右键根目录 →
New → File，命名为package.json，手动写最简结构，再右键该文件 →Run npm install
npm run build 报错 “command not found” 或卡住不动
这通常不是代码问题，而是 WebStorm 没正确关联 Node.js 环境，或者终端没加载 shell 配置（尤其 macOS/Linux）。
- 检查
Settings | Languages & Frameworks | Node.js and NPM中的Node interpreter是否指向真实路径（例如/opt/homebrew/bin/node或C:\Program Files\nodejs\node.exe），而不是 IDE 自带的 bundled 版本 - Mac 用户若用
zsh+brew安装 Node，WebStorm 默认终端可能没读取~/.zshrc，导致npm命令不可见；解决方法：设置里勾选Shell path并填/bin/zsh -i（带-i表示交互式，会加载配置） - Windows 用户用
nvm时，确保当前终端里nvm use激活的版本，和 WebStorm 设置里选的路径完全一致，否则npm版本错乱会导致依赖安装失败
构建产物生成后，怎么快速预览或上传？
WebStorm 不内置 FTP 或 GitHub Pages 发布功能，但能大幅简化操作链路。
- 构建成功后，产物默认在
dist/（Vite）、build/（CRA）或www/（某些模板）下；右键该文件夹 →Open in Terminal，直接运行npx serve -s（需提前全局装serve）即可本地预览 - 上传到静态托管平台（如 GitHub Pages、Vercel、Cloudflare Pages）靠的是 Git 推送或 CLI；WebStorm 集成 Git，右下角点击
Git→Commit→Push即可推送到远程仓库；Vercel 等平台监听推送后自动触发构建 - 如果要用 WebStorm 直接运行发布脚本（如
npm run deploy），确保该脚本已定义在package.json中，且对应命令（如gh-pages -d dist）已全局或本地安装
调试构建过程比看文档更管用：打开 WebStorm 内置终端看实时输出
构建失败时，错误信息全在终端里，但很多人习惯切到系统终端，反而错过 WebStorm 的语法高亮、点击跳转和折叠提示。
- 按
Alt+F12呼出内置终端，它和项目根目录绑定，自动激活当前项目的node_modules/.bin，无需手动cd - 执行
npm run build -- --debug（Vite 支持）或加--verbose参数，能看到模块解析路径、插件执行顺序等细节 - 终端里报错行带文件路径时，直接
Ctrl+Click可跳转到源码对应位置——这个能力系统终端没有
真正卡住的往往不是“怎么点菜单”，而是 Node.js 解释器路径没对上、shell 初始化没加载、或构建脚本压根没定义；这些地方 WebStorm 不会主动提醒，得你手动核对。
