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。
此链接就是部署后的网址啦。