The deployment of VuePress is covered in the official documentation, which is not very detailed. Here, the dy-ui-doc project is deployed to https://

.github. IO /

as follows:

1. Deploy GitHub Pages

1.1 Configuring Paths

indocs/.vuepress/config.jsConfigure the project package path under the file. This project is published tohttps://<USERNAME>.github.io/<REPO>, so you need to set base to<REPO>. ifdestIf this parameter is not set, the packaged file will be indocs/.vuepressNext, the folder is called dist. This project is deployed athttps://clyingdeng.github.io/dy-ui-doc/, so base is set to/dy-ui-doc/. I put the packaged directory in the root directory and named it Build, so./build.

Packaged directory:


1.2 Packaging push files

Create the deploy.sh file in the root directory. For details, see the vupress official website

#abort on errors

set -e



#build

npm run docs:build



#navigate into the build output directory

cd build

#The default pathcd 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'

#Published to the https:// < USERNAME >. Making. IO / < REPO >

git push -f [email protected]:ClyingDeng/dy-ui-doc.git master:gh-pages

Copy the code

Previously, bash had to be installed on your computer. Run the sh file using bash first. You can then set the script to run in script in the package.json file.

"scripts": {

    "docs:dev": "vuepress dev docs".

    "docs:build": "vuepress build docs".

    "deploy": "bash deploy.sh"

  },

Copy the code

Use bash to do the following:Push complete!At this point, check to see if your package has a warning, and if sowarning An error was encountered in plugin "dying-ui", the component library may be too large after packaging. Available in the component libraryvue.config.jsConfigure the build file and import file volume under file.

configureWebpack: {

    performance: {

      hints: 'warning',

      // The maximum volume of the entry point

      maxEntrypointSize: 50000000.

      // The maximum size of the generated file

      maxAssetSize: 30000000.

      // Give only performance hints for js files

      assetFilter: function (assetFilename) {

        return assetFilename.endsWith('.js')

      }

    }

  },

Copy the code

This does not exceed this size, and component library packaging does not have warnings.

Package and push to GitHub, then branchgh-pagesYou can see the package file you just pushed.

1.3 Configuring GitHub Pages

Under Setting, scroll down until you find itGitHub Pages.

Save after setting the deployment branch. When published is displayed, the deployment is successful, and click the link to see the project you just deployed.

Go to dy-ui-doc.

2. Netlify deployment

2.1 packaging

Create a new branch on the project that provides Netlify deployment (branch Branch02).

Will project clone, can willconfig.jsThe dest and base comments of the file are left as default.

Just pack it and push it to branch02.

2.2 netlify

Click loginnetlify. After logging in via GitHub association, clickNew site from GitCreate a new website.

Click on GitHub to see the image below. Select the project to deploy.


When you’re done, click Deploy Site.

You can click on theSite settingsSet a user-defined address. inGeneralUnder theSite detailsYou can edit your own IP address.

Click Modify to set a custom IP address.

This linkThis is the deployed url.