如何用 Netlify CLI 部署 Vite 构建产物【免费下载链接】viteNext generation frontend tooling. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vi/vite完成一个 Vite 静态站点项目后需要把构建产物发布到 Netlify。这条路径使用 Netlify CLI先在本地执行生产构建并预览验证再用netlify init创建站点、netlify deploy部署确认预览地址无误后用--prod标志发布到生产环境。以下是 Vite 官方静态部署文档中给出的完整操作路径适用于以 npm 作为包管理器、输出目录为默认dist的 Vite 项目使用 Yarn 等其他包管理器时用等效命令运行脚本即可。前置条件构建脚本与输出目录官方文档对部署指南做了统一的假设先核对你的项目满足Vite 已作为本地开发依赖安装package.json中配置了如下脚本{ scripts: { build: vite build, preview: vite preview } }构建输出使用默认位置dist。build.outDir默认值就是dist详见 build-options如果你改过输出目录Netlify 上部署的对象也要相应换成你的目录。另有一条限制需要注意vite preview只用于在本地预览构建产物不是生产服务器不能替代 Netlify 上线。本地构建并验证产物先在本地完整跑一遍构建和预览确认产物没问题再部署$ npm run build构建完成后产物默认位于dist目录。接着本地启动预览服务器$ npm run previewvite preview会启动一个静态服务器把dist中的文件服务在http://localhost:4173端口默认值见 preview-options默认4173。文档同时提示如果端口已被占用Vite 会自动尝试下一个可用端口所以实际监听端口未必是 4173启动时留意终端输出。如果想固定端口可以在脚本里传--port参数{ scripts: { preview: vite preview --port 8080 } }这样preview命令会把服务器启动在http://localhost:8080。安装 Netlify CLI 并部署文档给出的 CLI 部署路径分三步全局安装 Netlify CLInpm install -g netlify-cli这是一次全局安装会把netlify命令装到当前机器的 npm 全局环境需要网络连接可能需要系统权限。用netlify init创建一个新的站点netlify init部署站点netlify deploy执行后Netlify CLI 会提供一个预览 URL供你检查。这一步就是你的远程验证环节打开预览地址确认站点内容、资源和路由符合预期。发布到生产环境预览确认后使用prod标志把部署推上生产netlify deploy --prod判断逻辑很直接netlify deploy出的是预览部署netlify deploy --prod才是生产部署。如果本地npm run preview阶段就已经发现构建产物异常资源 404、样式丢失等应先解决构建问题不要继续走部署流程。限制说明与替代路径本文只覆盖 Netlify CLI 这条手动部署路径。文档同一章节还提供「Netlify with Git」方式把代码推到 Git 仓库后导入 Netlify后续非生产分支和 PR 会生成 Preview Deployments生产分支通常是 main的变更触发 Production Deployment。两种方式是并列选项不需要混用。这套流程针对静态部署。如果你的应用需要服务端渲染Vite 的 SSR 指南 描述的是另一条路径传统服务端框架集成则见 后端集成指南两者都不在本 CLI 部署流程的覆盖范围内。完整平台列表和上述各步骤的原始上下文可查阅仓库中的 静态部署文档。【免费下载链接】viteNext generation frontend tooling. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vi/vite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考