Vue 项目上线发布全流程指南

===

1 .前言

当 Vue3 项目本地开发结束后，上线是一个必经的步骤，同时也是很多初学者最易感到困惑的地方。本章将以 Vue3 + Vite + GitHub + Netlify 为框架，帮助你完成从编写、打包到免费部署上线的全过程。

2. Vite 项目打包配置

在项目根目录下，执行如下命令进行构建：

npm run build

打包后会生成 dist/ 目录，这是已经经过构建优化的静态文件，可直接部署。

如果使用路由（Vue Router），需要在 vite.config.js 中配置线上路径：

export default defineConfig({
  base: './', // 如果部署在子目
})

3. 使用 GitHub 管理项目版本

使用 Git 创建本地仓库：

git init
git add .
git commit -m "init"

然后在 GitHub 上新建一个仓库，执行：

git remote add origin https://github.com/你的用户名/项目名.git
git push -u origin master

4. Netlify 免费部署项目

1. 登录 Netlify （支持 GitHub 等 OAuth 登录）

2. 点击 "New site from Git"

3. 选择 GitHub 仓库，选择项目

4. 配置构建命令：

   Build command: npm run build Publish directory: dist

5. 一切 OK 后点击 "Deploy site"

6. Netlify 会自动扩展 CI/CD，每次 push 新代码都会自动部署

5. 基本性能优化提示

• 尽量开启缓存：HTTP cache + CDN

• 推荐对大文件进行 lazy load：Vue Router 分类加载

• 使用 vite-plugin-compression 进行 gzip 压缩

• 利用 vite-plugin-inspect 分析打包内容

6. 常见问题解决

问题

原因

解决方案

路由 404

SPA 项目网站刷新无法识别路由

Netlify 里配置 redirects: /* /index.html 200

图片路径失效

base 配置错误

在 vite.config.js 中配置 base: './'

CI 报错

构建脚本错误

检查 dist 目录是否存在

7. 总结

本章介绍了一套从 Vue3 项目构建到免费上线的实操流程，适合学生个例、竞赛项目或初创者快速展示产品原型。通过 GitHub 和 Netlify 的自动化合作，可以简单、效率、零成本地展示你的 Vue3 实战项目。