Vue3项目部署Gitee Pages

本文详细介绍了如何使用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生成的目录
    在这里插入图片描述
    部署完成就可以访问了。

参考

### 关于 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、付费专栏及课程。

余额充值