dy-ui组件库之页面部署

853 阅读3分钟

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',
      // 入口起点的最大体积
      maxEntrypointSize50000000,
      // 生成文件的最大体积
      maxAssetSize30000000,
      // 只给出 js 文件的性能提示
      assetFilterfunction (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。
此链接就是部署后的网址啦。