npm run build生成的是index.html、js、css及静态资源等纯前端文件，存放于dist（vue）或build（react）目录，需http服务器托管，不可直接双击运行。
build 命令到底生成了什么
Vue 和 React 项目打包后，npm run build（或 yarn build）输出的是一堆静态文件，不是可执行程序。核心产物是 index.html + js + css + 静态资源（图片、字体等），全部放在 dist（Vue）或 build（Create React App）目录下。
这些文件本身不依赖 Node.js 运行时，但必须由 HTTP 服务器提供服务——直接双击打开 index.html 会触发跨域或路由 404（尤其用 vue-router 的 history 模式或 react-router 的 BrowseRouter）。
- Vue CLI 默认输出到
dist/；可通过vue.config.js的outputDir修改 - Create React App 固定输出到
build/；不可改路径，但可用homepage字段修正资源引用前缀 - 如果项目部署在子路径（如
https://example.com/my-app/），必须配publicPath（Vue）或homepage（React），否则 JS/CSS 路径 404
本地预览 build 后页面为什么白屏或 404
直接用文件协议（file://）打开 index.html 会导致：AJAX 请求被浏览器拦截、前端路由跳转失败、图片路径解析错误。这不是代码 bug，是协议限制。
正确做法是起一个最小 HTTP 服务。不需要装完整 Web 服务器，几条命令就能验证：
- 用
npx serve -s dist（Vue）或npx serve -s build（React）——轻量、零配置、支持 SPA fallback - 用 Python：
python3 -m http.server 8000（但不自动 fallback 到index.html，history 模式路由会 404） - VS Code 插件如 “Live Server” 默认不处理 history fallback，同样会 404；别依赖它测生产构建
部署到 Nginx 时路由刷新 404 怎么办
这是最常卡住人的点：开发时一切正常，build 后部署到 Nginx，一刷新页面就 404。根本原因是 Nginx 默认按真实文件路径匹配，而前端路由是虚拟路径（如 /user/123），服务器上并不存在这个物理文件。
解决方案是在 Nginx 配置里加 try_files 规则，把所有非资源请求兜底到 index.html：
location / {
try_files $uri $uri/ /index.html;
}
注意几个细节：
- 不要写成
try_files $uri /index.html;（缺$uri/），否则访问/static/这类目录会失败 - 静态资源（
.js、.css、.png）仍会正常命中，不会被兜底，所以不影响加载 - 如果你用了自定义
publicPath或homepage，确保/index.html路径与之匹配（比如homepage: "/my-app/"，那兜底应是/my-app/index.html）
VS Code 里能不能一键部署到服务器
VS Code 本身不内置部署能力，所谓“一键”其实是靠插件+脚本组合实现，且必须你已有服务器权限。别信标榜“全自动部署 Vue 到阿里云”的插件——它们只是封装了 scp 或 rsync，底层仍是手动配置。
真正可行的最小闭环是：
- 用
npm run build生成静态文件 - 用 VS Code 的 “SFTP” 插件配置好服务器连接，设置上传路径为 Nginx 的
root目录（如/usr/share/nginx/html） - 右键
dist文件夹 → “Upload Folder”，或配好保存即同步 - 或者写个简单 shell 脚本：
npm run build && rsync -av dist/ user@host:/path/to/nginx/html/
注意：Nginx 配置修改后必须 sudo nginx -s reload 才生效，这步没法绕过，也别指望插件帮你输密码执行。
复杂点在于权限、路径一致性、CDN 缓存、版本回滚——这些都得自己设计，VS Code 只是个编辑器，不是运维平台。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
