15 - Vue3 UI Framework - 完工部署
项目官网也基本完成了,接下来我们再讲一下如何将项目官网部署到
GitHub Pages
上返回阅读列表点击 这里
项目配置
常见的模式有三种,即
History
模式Hash
模式Memory
模式
在我们的项目中采用的是 vue-router
, vue-router
有两种模式, 即 History
和 Hash
模式。
三者的区别与联系这里不再赘述,感兴趣的小伙伴可以自行查询。
为了简单快捷的部署,这里我们采用 Hash
模式将项目官网部署到 GitHub Pages
注意
不同的模式下,默认引用路径和
vue-router
的配置不同
History
模式vite.config.ts
中的base
字段为'/'
src/router.ts
中的history
为createWebHistory
Hash
模式vite.config.ts
中的base
字段为'./'
src/router.ts
中的history
为createWebHashHistory
打包构建
配置好以后打包构建即可,在此之前我们需要先配置一下 build
之后文件的默认引用路径。
打开 vite.config.ts
,更新 export default
对象属性如下:
export default {
base: './', //默认引用路径
assetsDir: 'assets',
}
注意
我们要将项目部署到
GitHub Pages
, 所以我们需要使用hash
模式更新
vite.config.ts
中的base
字段为'./'
更新
src/router.ts
中的history
为createWebHashHistory
在执行完 vite build
之后,dist
目录生成如下文件:
这些文件就可以部署了。
部署
我们可以根据自己的实际情况进行选择部署,通常有如下几种选择:
GitHub Pages
Gitee Pages
- 自己的服务器
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
对应的 repo
里 Pages
上看到了。
现在我们就可以通过 https://jeremywu917.github.io/jeremy-ui/ 进行官网的访问了
项目地址
GitHub: https://github.com/JeremyWu917/jeremy-ui
官网地址
JeremyUI: https://ui.jeremywu.top
感谢阅读
15 - Vue3 UI Framework - 完工部署的更多相关文章
- 00 - Vue3 UI Framework - 阅读辅助列表
阅读列表 01 - Vue3 UI Framework - 开始 02 - Vue3 UI Framework - 顶部边栏 03 - Vue3 UI Framework - 首页 04 - Vue3 ...
- 01 - Vue3 UI Framework - 开始
写在前面 一年多没写过博客了,工作.生活逐渐磨平了棱角. 写代码容易,写博客难,坚持写高水平的技术博客更难. 技术控决定慢慢拾起这份坚持,用作技术学习的阶段性总结. 返回阅读列表点击 这里 开始 大前 ...
- 05 - Vue3 UI Framework - Button 组件
官网基本做好了,接下来开始做核心组件 返回阅读列表点击 这里 目录准备 在项目 src 目录下创建 lib 文件夹,用来存放所有的核心组件吧.然后再在 lib 文件夹下创建 Button.vue 文件 ...
- 03 - Vue3 UI Framework - 首页
顶部边栏做完了,接下来开始做官网的首页 返回阅读列表点击 这里 创建视图文件夹 让我们先新建一个 src/views 文件夹,用来存放官网的主要视图 然后在该文件夹下新建两个 vue 文件,作为我们的 ...
- 06 - Vue3 UI Framework - Dialog 组件
做完按钮之后,我们应该了解了遮罩层的概念,接下来我们来做 Dialog 组件! 返回阅读列表点击 这里 需求分析 默认是不可见的,在用户触发某个动作后变为可见 自带白板卡片,分为上中下三个区域,分别放 ...
- 08 - Vue3 UI Framework - Input 组件
接下来再做一个常用的组件 - input 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 input 组件有两种类型,即 input 和 textarea 类型 当类型为 ...
- 09 - Vue3 UI Framework - Table 组件
接下来做个自定义的表格组件,即 table 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 基于原生 table 标签的强语义 允许用户自定义表头.表体 可选是否具有边框 ...
- 10 - Vue3 UI Framework - Tabs 组件
标签页是非常常用的组件,接下来我们来制作一个简单的 Tabs 组件 返回阅读列表点击 这里 需求分析 我们先做一个简单的需求分析 可以选择标签页排列的方向 选中的标签页应当有下划线高亮显示 切换选中时 ...
- 11 - Vue3 UI Framework - Card 组件
卡片是非常常用也是非常重要的组件,特别是在移动端的众多应用场景中,随便打开一个手机 App ,您会发现充斥着各种各样的卡片. 所以,我们也来制作一个简易的 Card 组件 返回阅读列表点击 这里 需求 ...
随机推荐
- 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 非阻塞网络编程原 ...
- Java交换数组元素
Java 交换数组元素 代码示例 import java.util.Arrays; import java.util.Collections; import java.util.List; impor ...
- 学会这几步,简单集成视频编辑原子能力SDK
华为视频编辑服务6.2.0版本上线后,我们为大家带来了两大变化:分别是丰富多样的AI能力和灵活选择的集成方式.为让开发者更快上手使用,今天小编带来了视频编辑原子能力SDK的具体集成方法.快来试试吧! ...
- SparkStreaming消费Kafka,手动维护Offset到Mysql
目录 说明 整体逻辑 offset建表语句 代码实现 说明 当前处理只实现手动维护offset到mysql,只能保证数据不丢失,可能会重复 要想实现精准一次性,还需要将数据提交和offset提交维护在 ...
- PLSQL导出oracle表结构和数据
1.导出表结构和数据 方式1.tools->export user objects是导出表结构 tools ->export user object 选择选项,导出.sql文件 说明:导出 ...
- Oracle—回车、换行符
1.回车换行符 chr(10)是换行符, chr(13)是回车, 增加换行符: select ' update ' || table_name || ' set VALID_STATE =''0A'' ...
- Oracle中的加解密函数
对Oracle内部数据的加密,可以简单得使用DBMS_CRYPTO来进行,效果还是不错的,而且使用也比较方便,所以今天专门来学习一下这个包的使用方法.在使用之前,要注意两件事情: 1.DBMS_CRY ...
- IntentFilter,PendingIntent
1.当Intent在组件间传递时,组件如果想告知Android系统自己能够响应那些Intent,那么就需要用到IntentFilter对象. IntentFilter对象负责过滤掉组件无法响应和处理的 ...
- [学习总结]2、android中的VelocityTracker(获得速率用的类)
参考资料:http://blog.jrj.com.cn/4586793646,5298605a.html 感谢这位兄弟! android.view.VelocityTracker主要用跟踪触摸屏事件( ...
- ArrayList删除特定元素的方法
最朴实的方法,使用下标的方式: ArrayList<String> al = new ArrayList<String>(); al.add("a"); a ...