项目本地发布到github并且上线可预览

项目发布上线

发布到 Githubpages

我们完成项目后，可以执行 npm run build 生成可编译后的代码，代码在 dist 目录下。下一步需要做的事就是把 dist 目录下的文件推送到 github 上。

第一步创建项目

在 github 上建立项目如 hellonote，拷贝项目地址 如:xxx

第二步设置自动化上传脚本

修改 pacakage.json, 加入如下 script

  "scripts": {
    "upload": "cd dist; git init; git remote remove origin; git remote add origin xxx.git; git add . ; git commit -m '打包发布上线' ;git push -f origin master && exit 0"
  },

或者在命令行

cd dist
git init
git remote remove origin
git remote add origin xxx.git // 仓库ssh链接
git pull  // 如果这一步不行,走下面三条命令
---
git fetch
git reset
git pull
---
git add ./
git commit -m 'publish'
git push

第三步

终端下执行

npm run build
npm run upload

上传后，我们在 github 当前项目的设置里设置 githubpages

gitpage.png

之后，我们就能点击上图生成的链接预览网站了

但是

出现了报错，检查元素一看，资源全是404。原因是配置打包时静态资源路径的问题。

因为我们让 js 打包在 html 里的路径是/assets 开头，而 githubpages 是有二级路径的，以/assets 开头实际上是加载的资源，路径明显不对。 所以，我们需要修改 webpack 打包的配置。

image.png

再次 build 并 upload ，可以正常打开了。