IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> 【学习笔记】在 Github Page 上托管基于 Vue 的项目 -> 正文阅读

[开发工具]【学习笔记】在 Github Page 上托管基于 Vue 的项目

环境

  1. vscode

前言

本篇博文仅仅提供如何将 vue 项目部署在 github page 的基本操作,至于项目的内容由读者自己决定。同时这是最基本的操作,所以在复杂的项目部署中,请根据具体情况,采取解决措施。

1. 新建仓库

首先新建一个仓库,这里我新建了一个 test 的仓库。
在这里插入图片描述
在这里插入图片描述
然后,我们将这个仓库 clone 到本地。
在这里插入图片描述
在这里插入图片描述
git clone git@github.com:yourname/reponame.git,这里的用户名和仓库名都要替换成你的。

2. 打包 vue 项目并上传

首先,我们在打包之前,还要做一件事情,就是修改路径。但是这里请注意,如果你是直接部署在 https://eternaldeath.github.io/这样的根路径下则无需修改。

但是,如果你是在某个仓库下的静态页面,例如本例中 https://eternaldeath.github.io/test/,那么就需要我们修改路径。

具体的做法是,在 vue 项目中找到 vue.config.js文件,在里面添加一行 publicPath: '/test/',这里的 /test/ 就是你的仓库的名字。
在这里插入图片描述
然后,我们只需要在控制台执行打包操作,即 npm run build进行打包。

打包好后,在项目目录中会出现 dist 文件,这就是我们需要部署的文件。
在这里插入图片描述
我们将 dist 文件夹中的所有内容拷贝到刚才 clonetest 本地文件夹中。

然后,执行 git add *git commit -m "提交信息自己写"git push origin master 这三条命令。

3. 配置 Github Page

这时我们再打开 github 上的 test 仓库,里面就有刚上传的文件了。
在这里插入图片描述
接着,打开 settings 选项,选择 左侧的 page 栏,选择第三步的 master 分支,最后点击 save 即可。
在这里插入图片描述
稍等一会儿(因为部署需要时间已经网络环境),点击给出的网址链接,即可访问。
在这里插入图片描述
那么,项目本身的内容就自行去撰写。

  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2022-04-22 18:57:14  更:2022-04-22 19:00:12 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/14 14:59:17-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码