vue-cli4搭建的vue项目在GitHub上演示,有手就行

前言

我们开源的vue新项目怎么在线上访问得到呢？购买服务器自己搭建？不需要。好好利用好github这平台就行了。
开始

第一步

• 这vue项目的根路径创建start.sh
  

然后在start.sh文件中配置以下内容

# 当发生错误时中止脚本
set -e
# 构建
npm run build
# cd 到构建输出的目录下 
cd dist
git init
git add -A
git commit -m 'start'
# 部署到 https://<github用户名>.github.io/<仓库名>
git push -f git@github.com:<github用户名>/<仓库名>.git master:gh-pages
cd -

• 在vue.config.js文件中配置以下内容
  module.exports = {
  // 生产环境 sourceMap
  productionSourceMap: false,
  publicPath: process.env.NODE_ENV === ‘production’
  ? ‘/仓库名/’
  : ‘/’
  }

第二步

在当前项目根目录下右击打开git bash Here(一定要git打开不然执行不了.sh文件，我的是win10)

然后切换到主分支(默认)执行 sh start.sh （eslint报错自己修改）

然后github打开该项目的setting ，拉到下面GitHub Pages, 如我的

点击网址就能访问了，这就大功告成了！网址是因为我的绑定了域名不然的应该为：https://xxxx.gihub.io/xxxx这个格式

下面放上我的完整配置图