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

===

1 .前言

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

2. Vite 项目打包配置

在项目根目录下,执行如下命令进行构建:

arduino 复制代码
npm run build

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

如果使用路由(Vue Router),需要在 vite.config.js 中配置线上路径:

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

3. 使用 GitHub 管理项目版本

使用 Git 创建本地仓库:

csharp 复制代码
git init
git add .
git commit -m "init"

然后在 GitHub 上新建一个仓库,执行:

csharp 复制代码
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 实战项目。

相关推荐
liweisum4 分钟前
AI驱动 WEB UI自动化---前端技术分享
前端·javascript·typescript
该用户已不存在5 分钟前
2025 年,Python工具别只知道Pycharm了
前端·后端·python
每天开心10 分钟前
噜噜旅游App(4)——搜索页面开发教程:热门推荐与关键词搜索模块
前端·前端框架
前端赵哈哈11 分钟前
🚀 从 Windi CSS 迁移到 Tailwind CSS v4 完整实践指南
前端·css·vue.js
ybr22 分钟前
基于react-router-dom, view transition 实现路由切换过渡动效
前端
饮茶三千23 分钟前
FreeMarker在保险电子保单/保函模板中的应用
前端·后端
前端的日常25 分钟前
提升开发效率,VSCode 中的两大神器
前端
掘金0126 分钟前
vue父子组件处理异步操作
前端
前端拿破轮26 分钟前
腾讯面试官:手写一个节流防抖看看
前端·javascript·面试
月亮css26 分钟前
vue3页面缓存,使用keep-alive的include不生效
前端