部署到托管平台
将 Vue 应用部署到静态托管服务和平台
部署到托管平台 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 2 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。
发布您的应用
Vue SPA 会构建为静态文件，因此可以托管在任意静态主机上。Netlify、Vercel 和 GitHub Pages 等平台可以快速部署这些文件，而且通常免费。
您要部署的内容
您要部署的是由 npm run build 生成的 dist 文件夹中的内容。主机会通过 CDN 将这些文件提供给全球用户。
npm run build
# upload the dist/ folder to your host部署到 Netlify
Netlify 可以从您的代码仓库构建。您只需告诉它构建命令和要发布的文件夹。
# Netlify settings
# Build command: npm run build
# Publish directory: dist部署到 Vercel
Vercel 会自动检测 Vite 项目。连接您的代码仓库后，它会运行构建并提供构建产物，还会在每次推送时重新部署。
# Vercel auto-detects:
# Build command: npm run build
# Output directory: dist部署到 GitHub Pages
GitHub Pages 会从代码仓库提供静态文件。您可以在本地或持续集成环境中构建，然后将 dist 产物推送到 Pages 分支，或使用操作。
历史模式问题
Vue Router 的历史模式会创建类似 /about 的简洁网址。但静态主机上并没有真正的 /about 文件，因此直接访问或刷新页面会返回 404。
SPA 回退修复
解决方案是让服务器为所有路由提供 index.html，让 Vue Router 在客户端处理路由。
Netlify 重定向规则
在 Netlify 上，添加一个 _redirects 文件（或添加 netlify.toml 规则），将所有路径重写到 index.html。
# public/_redirects
/* /index.html 200Vercel 重写规则
在 Vercel 上，通过 vercel.json 重写规则即可实现相同的回退到 index.html。
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}基础路径配置
如果您的应用是从子路径提供服务的（在 GitHub Pages 上很常见，例如 /my-repo/），请在 Vite 配置中设置 base 选项，以便正确解析资源地址。
// vite.config.js
export default {
base: "/my-repo/"
}持续集成部署
通过持续集成自动化部署。工作流会安装依赖、运行测试、构建并在每次推送到主分支时发布，因此整个发布过程无需手动操作。
# CI steps
# 1. npm install
# 2. npm run test
# 3. npm run build
# 4. deploy dist/快速检查
检验您对部署的掌握情况。
回顾
将 dist 文件夹部署到 Netlify、Vercel 或 GitHub Pages 等静态主机。添加 SPA 回退（将请求重定向或重写到 index.html），使历史模式路由在刷新后仍能正常工作；为子路径托管设置 Vite 的 base，并通过持续集成将整个过程自动化。接下来您将监控并维护生产环境中的应用。
常见问题解答
「部署到托管平台」课时是免费的吗？
是的 — 「部署到托管平台」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。
「部署到托管平台」这节课中我会学到什么？
将 Vue 应用部署到静态托管服务和平台 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 3 节。
「部署到托管平台」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。