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 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
网络异常，图片无法展示
|
GitHub Pages。
网络异常，图片无法展示
|
网络异常，图片无法展示
|
2. netlify部署
2.1 打包
在项目上新建一个分支，提供netlify部署（分支branch02）。
将项目clone，可以将config.js文件的dest、base注释，保持默认即可。
网络异常，图片无法展示
|
2.2 netlify
点击登录netlify。通过GitHub关联登录后，点击New site from Git，创建一个新网站。
网络异常，图片无法展示
|
出现如下图，点击GitHub。选择需要部署的项目。
网络异常，图片无法展示
|
完成后，点击Deploy site即可。
网络异常，图片无法展示
|
Site settings设置自定义地址。在
General下的
Site details可以编辑自己的IP地址。
网络异常，图片无法展示
|
网络异常，图片无法展示
|
网络异常，图片无法展示
|
作者：ClyingDeng
链接：https://juejin.cn/post/6902006615235362824
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
