dy-ui组件库之页面部署

简介: vuepress的部署在官方文档中,有涉及,其实并没有很详细。在此,dy-ui-doc项目部署到https://<USERNAME>.github.io/<REPO>的详细部署步骤如下:

1. GitHub pages部署


1.1 配置路径


docs/.vuepress/config.js文件下配置项目打包路径。本项目是发布到https://<USERNAME>.github.io/<REPO>下,所以需要将base设置为<REPO>。如果dest不设置则默认打包后的文件在docs/.vuepress下,文件夹名为dist。本项目部署在https://clyingdeng.github.io/dy-ui-doc/,所以base设置为/dy-ui-doc/。我将打包后的目录放到根目录下并命名为build,所以为./build

网络异常,图片无法展示
|

打包后的目录:

网络异常,图片无法展示
|


1.2 打包推送文件


在根目录下创建deploy.sh文件,文件内容见vupress官网

# abort on errors
set -e
# build
npm run docs:build
# navigate into the build output directory
cd build
# 默认路径 cd docs/.vuepress/dist
# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:ClyingDeng/dy-ui-doc.git master:gh-pages
复制代码

此前,电脑必须安装好bash。先使用bash运行sh文件。之后可以在package.json文件的script中设置脚本运行。

"scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "deploy": "bash deploy.sh"
  },
复制代码

使用bash执行如下:

网络异常,图片无法展示
|
推送完成!
网络异常,图片无法展示
|
在此,请注意看你的打包是否存在warning,如果存在 warning An error was encountered in plugin "dying-ui",则可能是组件库打包后的体积过大。可以在组件库的 vue.config.js文件下配置生成文件与入口文件体积。

configureWebpack: {
    performance: {
      hints: 'warning',
      // 入口起点的最大体积
      maxEntrypointSize: 50000000,
      // 生成文件的最大体积
      maxAssetSize: 30000000,
      // 只给出 js 文件的性能提示
      assetFilter: function (assetFilename) {
        return assetFilename.endsWith('.js')
      }
    }
  },

这样不超过此大小,组件库打包也不会存在warning。

打包推送到GitHub上,则可以在分支gh-pages上看到刚刚推送的打包文件。

网络异常,图片无法展示
|


1.3 配置GitHub pages


网络异常,图片无法展示
|
在setting下,往下滚动直到找到 GitHub Pages

网络异常,图片无法展示
|
设置部署分支后save,即可。当显示published时,表示部署成功,点击链接就可以看到刚才部署的项目啦。

网络异常,图片无法展示
|

点击跳转dy-ui-doc


2. netlify部署


2.1 打包


在项目上新建一个分支,提供netlify部署(分支branch02)。

将项目clone,可以将config.js文件的dest、base注释,保持默认即可。

网络异常,图片无法展示
|
打包推送到branch02分支上即可。


2.2 netlify


点击登录netlify。通过GitHub关联登录后,点击New site from Git,创建一个新网站。

网络异常,图片无法展示
|

出现如下图,点击GitHub。选择需要部署的项目。

网络异常,图片无法展示
|

完成后,点击Deploy site即可。

网络异常,图片无法展示
|
可以点击 Site settings设置自定义地址。在 General下的 Site details可以编辑自己的IP地址。

网络异常,图片无法展示
|
点击修改,设置自定义IP。

网络异常,图片无法展示
|
网络异常,图片无法展示
|
此链接就是部署后的网址啦。


作者:ClyingDeng

链接:https://juejin.cn/post/6902006615235362824

来源:稀土掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

目录
相关文章
|
8天前
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
20 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
8天前
|
JavaScript 前端开发
vue element-ui分页插件 始终保持在页面底部样式
vue element-ui分页插件 始终保持在页面底部样式
40 0
|
8天前
|
机器学习/深度学习 人工智能 前端开发
机器学习PAI常见问题之web ui 项目启动后页面打不开如何解决
PAI(平台为智能,Platform for Artificial Intelligence)是阿里云提供的一个全面的人工智能开发平台,旨在为开发者提供机器学习、深度学习等人工智能技术的模型训练、优化和部署服务。以下是PAI平台使用中的一些常见问题及其答案汇总,帮助用户解决在使用过程中遇到的问题。
|
6月前
HTML+VUE+element-ui通过点击不同按钮展现不同页面
HTML+VUE+element-ui通过点击不同按钮展现不同页面
92 1
|
8天前
|
前端开发 JavaScript 程序员
一个成都七中的初中生,出于兴趣爱好实现的 Win12 UI 页面效果,佩服佩服
一个成都七中的初中生,出于兴趣爱好实现的 Win12 UI 页面效果,佩服佩服
15 0
|
8天前
|
移动开发
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
|
7月前
|
小程序 JavaScript 开发者
uniapp小程序订单页面UI
uniapp小程序订单页面UI
311 0
|
8天前
|
前端开发
SAP UI5 应用如何使用 iframe 嵌入其他 HTML 页面试读版
SAP UI5 应用如何使用 iframe 嵌入其他 HTML 页面试读版
38 0
|
8天前
|
JavaScript 前端开发
vue element-ui分页插件 始终保持在页面底部样式
vue element-ui分页插件 始终保持在页面底部样式
92 0
|
5月前
|
JavaScript
Vue + Element UI 实现复制当前行数据功能(复制到新增页面组件值不能更新等问题解决)
# 1、需求 使用Vue + Element UI 实现在列表的操作栏新增一个复制按钮,复制当前行的数据可以打开新增弹窗后亦可以跳转到新增页面,本文实现为跳转到新增页面。 # 2、实现 ## 1)列表页 index.vue ```html <el-table> <!-- 其他列 --> <el-table-column label="操作" width="150"> <template slot-scope="scope"> <el-button icon="el-icon-copy-document" title="复制" @click="toCopyNew(scope
75 0

热门文章

最新文章