前提:
创建个人的Github站点的仓库。 ” Github用户名.github.io “
在这仓库里放一些静态页面,在外网访问就能访问到里面的静态资源了
1. GitHub Pages
第一种:直接使用Github的Github Pages进行构建。
GitHub仓库 - Settings - GitHub Pages - 选择分支 - Save
访问:Github用户名.github.io/仓库地址 将显示仓库中index.html的内容。
2. gh-pages
package.json添加deploy script:
"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "deploy": "gh-pages -d dist" }
- 安装gh-pages;
npm install gh-pages --save-dev
- 打包项目;(生成dist目录)
npm run build
- npm run deploy:在Github仓库建立gh-pages分支,并将dist目录的内容作为分支的内容;并自动设置Source为gp-pages分支。
访问:Github用户名.github.io/仓库地址
后记:
- 删除:删除仓库的gh-pages分支( git push origin --delete gh-pages ),在Setttings中设置source为None;