一、本地项目上传至github:
1.github上创建与本地仓库同名的远程仓库
2.初始化本地项目创建本地仓库:
(1)进入项目: cd E:/web前端//cnode-vue.js
。
(2)初始化:git init
,初始化后目录下会多出一个隐藏的.git文件夹。
(3)将目录下工作区中所有文件添加到暂存区:git add .
。
(4)提交更改:git commit -m '首次提交'
。
(5)查看状态:git status
。
3.添加远程主机:git remote add origin https://github.com/yufengxiaomuyu/cnode-vue.js.git
(git remote
可以查看已添加的远程主机)。
4.推送本地仓库到远程仓库:git push -u origin master
。
5.填写用户名和密码:注意中间弹出的OpenSSH窗口输入的不是GitHub账号登陆密码,而是github personal access(该密码仅在创建时可查看,要注意保存)。
二、Vue-cli项目在github pages上部署预览
(1)打包本地项目:npm run build
,打包后会多出一个dist文件夹。
(2)!!!注意:
1.将dist文件下index.html中 ccs、js等引用的绝对路径'/'
更改为相对路径'./'
,可解决ccs、js等请求错误导致的页面空白问题。
2.或者在打包(运行npm run build
)之前,找到build/webpack.prod.conf.js文件,将output对象中的publicPath配置为'./'
,如下:
output: {
publicPath: './',
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
(3)创建并切换至gh-pages分支:git checkout -b gh-pages
。
(4)添加文件dist至暂存区:git add -f dist
。
(4)提交git commit -m 'gh-pages分支提交dist文件夹'
。
(5)推送本地仓库gh-pages分支至远程仓库:git subtree push --prefix dist origin gh-pages
。
(6)将远程仓库切换至gh-pages分支,然后在该分支下设置页面创建gh-pages分支的github pages,即可点击生成的链接进行预览了。
参考文献:
作者:小董君;链接:https://www.jianshu.com/p/cc053119f119,