项目官网也基本完成了,接下来我们再讲一下如何将项目官网部署到 GitHub Pages

返回阅读列表点击 这里

项目配置

常见的模式有三种,即

  • History 模式
  • Hash 模式
  • Memory 模式

在我们的项目中采用的是 vue-routervue-router 有两种模式, 即 HistoryHash 模式。

三者的区别与联系这里不再赘述,感兴趣的小伙伴可以自行查询。

为了简单快捷的部署,这里我们采用 Hash 模式将项目官网部署到 GitHub Pages

注意

不同的模式下,默认引用路径和 vue-router 的配置不同

  • History 模式

    • vite.config.ts 中的 base 字段为 '/'
    • src/router.ts 中的 historycreateWebHistory
  • Hash 模式
    • vite.config.ts 中的 base 字段为 './'
    • src/router.ts 中的 historycreateWebHashHistory

打包构建

配置好以后打包构建即可,在此之前我们需要先配置一下 build 之后文件的默认引用路径。

打开 vite.config.ts ,更新 export default 对象属性如下:

export default {
base: './', //默认引用路径
assetsDir: 'assets',
}

注意

我们要将项目部署到 GitHub Pages , 所以我们需要使用 hash 模式

更新 vite.config.ts 中的 base 字段为 './'

更新 src/router.ts 中的 historycreateWebHashHistory

在执行完 vite build 之后,dist 目录生成如下文件:

这些文件就可以部署了。

部署

我们可以根据自己的实际情况进行选择部署,通常有如下几种选择:

  1. GitHub Pages
  2. Gitee Pages
  3. 自己的服务器

GitHub Pages 服务器在国外,国内访问比较慢,有时候会打不开。重新提交代码部署后会自动更新部署页。

Gitee Pages 服务器在国内,国内访问比较快。重新提交代码部署后不会自动更新部署页,需要手工更新。

自己的服务器,随意

自动化部署脚本

为了后续的方便部署,我们这里创建一个自动化部署脚本,实现一键部署:

在项目的根目录下创建 publish-github-pages.sh 文件,内容如下:

rm -rf dist &&
npm run build &&
cd dist &&
git init &&
git add . &&
git commit -m "update and publish jeremy-ui" &&
git branch -M publish &&
git remote add origin git@github.com:JeremyWu917/jeremy-ui.git &&
git push -f -u origin publish &&
cd -
echo https://jeremywu917.github.io/jeremy-ui/index.html

注意

如果你的部署完成后无法打开界面,那么要先确认下 build 后生成的文件是否加密了,先解密后再上传试试

部署完成后就可以在 GitHub 对应的 repoPages上看到了。

现在我们就可以通过 https://jeremywu917.github.io/jeremy-ui/ 进行官网的访问了

项目地址

GitHub: https://github.com/JeremyWu917/jeremy-ui

官网地址

JeremyUI: https://ui.jeremywu.top

感谢阅读

15 - Vue3 UI Framework - 完工部署的更多相关文章

  1. 00 - Vue3 UI Framework - 阅读辅助列表

    阅读列表 01 - Vue3 UI Framework - 开始 02 - Vue3 UI Framework - 顶部边栏 03 - Vue3 UI Framework - 首页 04 - Vue3 ...

  2. 01 - Vue3 UI Framework - 开始

    写在前面 一年多没写过博客了,工作.生活逐渐磨平了棱角. 写代码容易,写博客难,坚持写高水平的技术博客更难. 技术控决定慢慢拾起这份坚持,用作技术学习的阶段性总结. 返回阅读列表点击 这里 开始 大前 ...

  3. 05 - Vue3 UI Framework - Button 组件

    官网基本做好了,接下来开始做核心组件 返回阅读列表点击 这里 目录准备 在项目 src 目录下创建 lib 文件夹,用来存放所有的核心组件吧.然后再在 lib 文件夹下创建 Button.vue 文件 ...

  4. 03 - Vue3 UI Framework - 首页

    顶部边栏做完了,接下来开始做官网的首页 返回阅读列表点击 这里 创建视图文件夹 让我们先新建一个 src/views 文件夹,用来存放官网的主要视图 然后在该文件夹下新建两个 vue 文件,作为我们的 ...

  5. 06 - Vue3 UI Framework - Dialog 组件

    做完按钮之后,我们应该了解了遮罩层的概念,接下来我们来做 Dialog 组件! 返回阅读列表点击 这里 需求分析 默认是不可见的,在用户触发某个动作后变为可见 自带白板卡片,分为上中下三个区域,分别放 ...

  6. 08 - Vue3 UI Framework - Input 组件

    接下来再做一个常用的组件 - input 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 input 组件有两种类型,即 input 和 textarea 类型 当类型为 ...

  7. 09 - Vue3 UI Framework - Table 组件

    接下来做个自定义的表格组件,即 table 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 基于原生 table 标签的强语义 允许用户自定义表头.表体 可选是否具有边框 ...

  8. 10 - Vue3 UI Framework - Tabs 组件

    标签页是非常常用的组件,接下来我们来制作一个简单的 Tabs 组件 返回阅读列表点击 这里 需求分析 我们先做一个简单的需求分析 可以选择标签页排列的方向 选中的标签页应当有下划线高亮显示 切换选中时 ...

  9. 11 - Vue3 UI Framework - Card 组件

    卡片是非常常用也是非常重要的组件,特别是在移动端的众多应用场景中,随便打开一个手机 App ,您会发现充斥着各种各样的卡片. 所以,我们也来制作一个简易的 Card 组件 返回阅读列表点击 这里 需求 ...

随机推荐

  1. Netty | 第1章 Java NIO 网络编程《Netty In Action》

    目录 前言 1. Java 网络编程 1.1 Javs NIO 基本介绍 1.2 缓冲区 Buffer 1.2 通道 Channel 1.3 选择器 Selector 1.4 NIO 非阻塞网络编程原 ...

  2. Java交换数组元素

    Java 交换数组元素 代码示例 import java.util.Arrays; import java.util.Collections; import java.util.List; impor ...

  3. 学会这几步,简单集成视频编辑原子能力SDK

    华为视频编辑服务6.2.0版本上线后,我们为大家带来了两大变化:分别是丰富多样的AI能力和灵活选择的集成方式.为让开发者更快上手使用,今天小编带来了视频编辑原子能力SDK的具体集成方法.快来试试吧! ...

  4. SparkStreaming消费Kafka,手动维护Offset到Mysql

    目录 说明 整体逻辑 offset建表语句 代码实现 说明 当前处理只实现手动维护offset到mysql,只能保证数据不丢失,可能会重复 要想实现精准一次性,还需要将数据提交和offset提交维护在 ...

  5. PLSQL导出oracle表结构和数据

    1.导出表结构和数据 方式1.tools->export user objects是导出表结构 tools ->export user object 选择选项,导出.sql文件 说明:导出 ...

  6. Oracle—回车、换行符

    1.回车换行符 chr(10)是换行符, chr(13)是回车, 增加换行符: select ' update ' || table_name || ' set VALID_STATE =''0A'' ...

  7. Oracle中的加解密函数

    对Oracle内部数据的加密,可以简单得使用DBMS_CRYPTO来进行,效果还是不错的,而且使用也比较方便,所以今天专门来学习一下这个包的使用方法.在使用之前,要注意两件事情: 1.DBMS_CRY ...

  8. IntentFilter,PendingIntent

    1.当Intent在组件间传递时,组件如果想告知Android系统自己能够响应那些Intent,那么就需要用到IntentFilter对象. IntentFilter对象负责过滤掉组件无法响应和处理的 ...

  9. [学习总结]2、android中的VelocityTracker(获得速率用的类)

    参考资料:http://blog.jrj.com.cn/4586793646,5298605a.html 感谢这位兄弟! android.view.VelocityTracker主要用跟踪触摸屏事件( ...

  10. ArrayList删除特定元素的方法

    最朴实的方法,使用下标的方式: ArrayList<String> al = new ArrayList<String>(); al.add("a"); a ...