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 实战项目。

相关推荐
Mr_Mao1 小时前
Naive Ultra:中后台 Naive UI 增强组件库
前端
前端小趴菜052 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~3 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.4 小时前
serviceWorker缓存资源
前端
RadiumAg5 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo5 小时前
ES6笔记2
开发语言·前端·javascript
yanlele5 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子6 小时前
React状态管理最佳实践
前端
烛阴7 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子7 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端