Vue3项目部署Gitee Pages

已于 2023-09-22 16:51:48 修改
阅读量261 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 运维 文章标签： gitee vue
于 2023-09-20 16:49:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43076923/article/details/133086364
本文详细介绍了如何使用Vite构建的Vue3项目部署到GiteePages，步骤包括修改vite.config.js、构建并测试、配置.gitignore，最后推送代码并选择分支部署。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Vue3项目部署Gitee Pages

采用的Vite构建的Vue3项目

准备部署的项目：db-transfer

部署

  1. 修改vite.config.js中的base，base为/仓库名称/
    vite配置

  2. 构建并测试
    构建项目包：npm run build
    本地测试：npm run preview
    测试没问题之后，修改.gitignore文件，注释dist/，然后全部push到仓库

  3. 开启Gitee Pages
    在这里插入图片描述
    选择分支，部署目录就是刚才npm run build生成的目录
    在这里插入图片描述
    部署完成就可以访问了。

参考

【项目实战】将 VuePress风格的博客部署到gitee page服务器上
本本本添哥
12-05 1062
介绍VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。
前端项目（vue3）自动化部署（Gitlab CI/CD）尚在完善中---＞
博客主要分享技术教程、工具教程、bug解决、前沿技术动态、编程经验、心得感悟等。 内容同步、干货获取、推广宣发请看侧栏推广信息
03-15 3422
正常部署前端项目时需要先打包后放到服务器上进行手动部署，现在我们尝试用Gitlab的CI/CD功能来实现自动化部署前端项目，节省部署操作时间以及避免过程中操作失误的可能。系统：linux centos。
Vite + Vue3 部署 GitHub
paopao_pop的博客
05-22 704
因为在 yml 文件中是监控 push 事件，所以会自定发布。新建文件夹 .github 然后再建一个文件夹 workflows。因为静态资源是可以部署到 GitHub 上，自己顺便学习部署网站。在 Actions 里可以查看进度，成功以后就会生成一个地址。因为我使用的是 Vite 工具，官方有提供相应 Demo。打开项目 GitHub 地址，点击 Settings。记录自己的第一个 GitHub 部署项目。新建文件 main.yml 文件。直接使用官方文档 demo。
Vue项目打包部署到GitHub Pages
云间月
07-04 6545
Vue项目打包部署到GitHub Pages 前言 关于什么是github pages？怎样创建github 仓库上传本地项目到GitHub远程仓库？等基本操作本文不再赘述，初学者可以通过搜索找到大量文章教程。本文重点在于： 如何将vue项目源码（含dist目录）同步到到github仓库，同时单独将项目下的dist目录同步到gh-pages分支以便使用GitHub pages 发布和预览静态网页。 上述问题，作者以往的做法是将Vue项目源码托管到源码仓库，然后另外创建一个webpage仓库管理 前期
vue3+vite静态页面部署到gitee pages
qq_45952585的博客
12-20 1541
vue3+vite静态页面部署到gitee pages。
vue3 - 前端 Vue 项目提交GitHub 使用Actions自动化部署
iotjin的专栏
09-21 1640
vue前端项目写好之后，想部署到线上通过在线地址进行访问，可以通过gitee或者GitHub的pagesVue - vue项目打包部署到Github的pages在线访问。
如何将Vue项目部署到Git Page页面实现通过git仓库部署网页
DanielSmith
06-09 1655
最近需要给自己项目组的git项目写一个官网web页面进行展示，于是需要实现这个功能 下面将会主要介绍如何进行文档的部署： 参考官网链接： https://pages.github.com/ （这里假设大家已经会构建一个完整的Vue项目） 创建好之后，按照空仓库的指引: 3. 首先去你打包好的dist文件夹下，cmd到当前文档目录： 根据github的提示命令： 切换到另一个分支： 在新的分支中，添加刚才创建的dist文件内容： 将本文文件commit一下， 这个时候要是报错，可以将上述语
使用gitee pages部署vue-cli4.X搭建的纯前端vue项目
BigFamer的博客
11-11 1502
一、前言 最近做了一个纯前端的静态展示页面，为了方便起见，直接将它部署到了gitee pages上，期间也遇到了一些问题，比如部署后没有页面，控制台报错的404找不到资源的问题，但最后还是成功部署了项目。 二、实现gitee pages部署 2-1、gitee pages部署准备工作 2-1-1、首先，你需要将gitee pages这个功能开通，开通这个需要身份证等一些个人材料 ...
Vue 项目部署到GitHub Pages
GuAng
08-18 1388
运行后，git就会执行该文件里的命令。大致就是，构建打包项目代码，然后将打包后的代码上传到仓库中的 gh-pages 分支。要将项目部署到 https://.github.io// 上 (即仓库地址为 https://github.com//)，可将 publicPath 设为 “//”。在你的github项目的 Settings - Options 下的 GitHub Pages项里，可以看到你的项目线上网站地址。...
使用Gitee Pages服务 搭建Vue项目
LitongZero的博客
03-05 8841
使用Gitee Pages服务 搭建Vue项目 1.背景 1.Gitee（GitHub） Pages 服务作为一个页面容器，可以说是非常方便了。我们可以在上面免费部署前端项目。 2.并且同时获得一个附带.gitee.io（github.io）的网址。 3.其他优点就不再赘述，可自行百度。 2.Gitee Pages的介绍 具体可以看这个网址Gitee Pages官方介绍 3.上传自己的项目到G...
vue2怎么部署gitee
最新发布
04-03
### 如何将 Vue2 项目部署到 Gitee #### 部署前准备 在开始之前，需确认已安装 Node.js 和 Git 工具，并完成 Vue2 项目的开发工作。此外，还需拥有一个 Gitee 账号并创建好目标仓库。 #### 构建项目 执行以下命令...
手摸手教你Vite+Vue3项目初始化及开源部署到GItee
weixin_44000173的博客
05-23 1832
本片文章主要手摸手教你Vite+Vue3项目初始化及开源部署到GItee，记录项目的环境，项目搭建。 本文在开始本次学习中，鉴于你有前端三件套和vue的知识基础。 文档创建于2023年5月20日，大家都去过情人节了~我在肝代码！node版本使用18.16.0。 目前（2023.05.20）的稳定版本，这里推荐使用nvm来管理node的版本。Nvm使用教程（很简单）。
Vue项目+Nginx+Jenkins+Gitee实现项目的自动化部署
qq_43825538的博客
05-15 1201
自动化部署项目
Vue vue cli 3.x 项目部署到github page
少年阿bin的博客
09-02 258
ue CLI 3.x 项目部署到 GitHub Pages，请看以下步骤在你的 Vue CLI 3.x 项目中，打开命令行终端在 GitHub 上创建一个新的仓库，用于托管你的静态页面。确保仓库的名称为，其中<username>是你的 GitHub 用户名。在命令行终端中，导航到你的项目根目录替换<username>为你的 GitHub 用户名。等待代码推送完成后，访问即可查看部署后的项目。publicPath这样，你的 Vue CLI 3.x 项目就可以成功部署到 GitHub Pages 上了。
echarts 大屏可视化_基于 Vue3.0+Echarts 可视化大屏数据分析系统
weixin_39547158的博客
11-21 1746
今天给小伙伴们推荐一款超优秀的全新Vue3.0大数据系统Vue3-bigData。vue3-bigdata 基于vue3.0+echarts构建的可视化大屏图表展示系统。包括各种可视化图表及Vue3新API使用。功能柱状图、饼图、词云图、漏斗图水球图、折线图仪表盘、雷达图矩形树图、关系图地图(分布图、散点图、热力图)安装使用# 克隆项目git clone https://github.com/bi...
vue3的vite项目部署到github pages的方法研究
峰会路转的博客
02-14 655
平时做项目都在我们本地预览，那样就只有自己能看到，那我们做的就无法展示给别人(客户看),很不方便！今天写篇怎么把自己的vite项目(demo)部署到github pages上面的方法！
Gitee 部署vue-cli3项目
斗战圣佛91的博客
07-08 1521
话不多说，我们先来了解一下什么是gitee pages。 1.首先我们进入到自己的gitee仓库里(这里忽略你已经创建过属于你自己的线上仓库了[手动滑稽]),在仓库名称下面我们会发现有一个服务的文字，当我们点开它就能看到Gitee Pages几个大字了 2.点击进入后，我们会看到对Gitee Pagesd的功能简介，其重要功能就是用来展示静态页面的一个小用途 目录[隐藏] 通过前面两点的简单介绍，我们就开始实际操作吧！ 首先我们在自己的线上仓库新建一个分支 现在我们试试使用...
将 Vue CLI 静态资源部署至gitee上的坑
weixin_43845044的博客
06-15 1062
官方文档 写的非常好！！！照着做基本没问题！！！（至少我第一次用的时候没问题） 后来，我把项目重新改了改，也不知道是动到了哪~，打包以后，用serve -s dist本地查看dist就报了这几条错误。我寻思着前前后后，我改动过的配置，就是引入ant design vue的时候，在vue.config.js里添加了less loader的规则，难道~？算了，说正经的 报错原因如下： 在vue.config.js里，对publicPath进行了如下配置，在本地环境中，这个 JS 的路径是不存在的！但是在 G
giteepages部署vue项目防坑指南
tuzi007a的博客
01-14 1264
giteepagesgiteepages官方文档注意事项流程潜在问题 giteepages官方文档 https://gitee.com/help/articles/4136#article-header0 注意事项 每次发布上线后，需要ctrl + f5强制刷新页面，清除强缓存 项目内容每次有更新，都要重新yarn build打包，重新传到gitee分支。 路径很重要，要严格按照说明操作。不然会404. 流程 创建gitee项目 git clone到本地 本地创建vue项目
gitee pages
01-29
### 关于 Gitee Pages 的使用教程和配置方法 #### 创建并初始化 Git 仓库用于 Gitee Pages 为了使项目能够通过 Gitee Pages 发布，在项目的根目录下执行一系列操作来设置远程仓库连接。这涉及到创建一个新的本地分支并与远端指定的 `master` 或者其他目标分支同步[^2]。 ```bash cd "./COMMIT" git init git remote add origin https://gitee.com/username/repositoryname.git git fetch git reset --hard origin/master git branch --set-upstream-to=origin/master master ``` 上述命令序列完成了对已有在线仓库的克隆而不下载其文件，接着重置工作区至最新的提交状态，并设定了推送更新时所跟踪的目标分支。 #### 修改 Angular 应用的基础路径 对于基于框架的应用程序如 Angular 来说，当准备将其部署到子路径而非网站根部时，则需调整应用内部链接结构以适应新的位置。具体做法是在 `index.html` 中修改 `<base>` 标签属性值为空字符串，从而允许相对 URL 正常解析[^5]： ```html <base href="" /> ``` 此改动确保了即使页面位于非根级别的URL也能正确加载资源和服务请求。 #### 利用 npm 构建工具链完成前端构建过程 在准备好源代码之后，通常还需要借助像 Node.js 生态中的包管理器（NPM）所提供的脚本来自动化生产环境下的优化流程。例如运行 `npm run build` 可以触发 Webpack 等打包工具的工作流，最终产出适合上线发布的静态资产集合[^1]。 #### 推送生成的内容至特定发布分支 最后一步就是将经过处理后的静态站点内容上传给服务器端供公网访问。一般情况下，Gitee Pages 要求这些公开可浏览的数据存放在名为 `gh-pages` 的特殊分支里；因此先要切换过去再实施常规的版本控制动作——添加变动、记录快照以及向云端同步最新版次[^4]。 ```bash git checkout --orphan gh-pages rm -rf . cp -r dist/* ./ git add . git commit -m "Deploy to gitee pages" git push origin gh-pages ``` 这里假设之前已经有一个叫作 `dist` 的输出目录存放着由构建阶段产生的成品文件夹及其内含物。通过复制它们覆盖掉现有的一切后即实现了有效替换旧有展示材料的目的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值