项目打包部署到github的GitHub Pages(静态网页)
1.在GitHub上建一个新仓库2.建立好仓库要拉去到本地git clonehttps://github.com/zuo-bufan/deploy-demo.git ( 这里放入自己仓库就可以了)3. 进入deploy-demo仓库创建 vue项目项目建立完成4.运行项目(配置vue.config.js文件)【上面讲了很多废话,我相信小伙伴上面的步骤都已经会的,接下来要讲重点了】在项目中建一个vu
·
1.在GitHub上建一个新仓库
2.建立好仓库要拉去到本地
git clone https://github.com/zuo-bufan/deploy-demo.git ( 这里放入自己仓库就可以了)
3. 进入deploy-demo仓库创建 vue项目
项目建立完成
4.运行项目(配置vue.config.js文件)【上面讲了很多废话,我相信小伙伴上面的步骤都已经会的,接下来要讲重点了】
在项目中建一个vue.config.js文件
vue.config.js代码
module.exports = {
assetsDir:'static',
parallel:false,
publicPath:'./',
devServer:{
port:5000,//端口号
open:true, //是否自启动
},
}
接下来到router中把mode的属性注释或改为 “hash” 路由
5.项目打包
执行代码
npm run build
多了一个dist文件
6. 上传代码到github远程仓库
注意 注意 注意
上传代码前要做一件很重要的事
把 .gitignore 文件删掉 或者把 /dist 注释一下 (否者上传时dist文件上传不了)
提交代码
github仓库中可以看到这些文件
7.部署 dist 文件到 GitHub Pages 上
执行代码将dist目录推送到远程的gh-pages分支
git subtree push --prefix dist origin gh-pages
在仓库中可以看到
登录远程GitHub仓库,通过setting -> github pages -> source 将gh-pages设置为GitHub pages 的source
在这里部署的时候可能有时候Save按钮会是失效的,不要慌,在重新选gh-pages分支即可
8.部署成功
更多推荐
已为社区贡献1条内容
所有评论(0)