GitHubPages 踩坑，及遇到的问题GitHubPages 可以在 github 上预览React/Vue项目，测

GitHubPages 可以在 github 上预览React/Vue项目，测试结果就只针对前端页面展示。

1.创建github仓库

1.1

1.2

1.2.1这里的 `Repository name` 是自定义的仓库名称，同时是打包的文件路径，后面在`build`项目时需要用到。所以这个地方需要用英文

1.2.1这里需要选择 `publish` 公开这个项目。如果是 `private` 设置为私有仓库，那么GitHubPages 需要支付费用。

1.3

创建完成之后，就是对仓库代码的管理。

2.对项目代码的处理

2.1 安装 gh-pages

  npm install gh-pages --save-dev

2.2 处理package.json

     // package.json
     {
         ...,
         "homepage": "./",
          {
             ...,
            "deploy": "gh-pages -d dist -b master"
          },
     
     }
     // 解释："deploy": "gh-pages -d dist -b master"
        // dist： build之后生成的文件名----> 可根据项目自行修改
        // master: gh-pages上传的分支名称

出现的问题

     # fatal: A branch named ‘分支名‘ already exists.
     删除node_modules下面 .cache 的 gh-pages 文件夹

2.3 处理项目路由

要把项目中的路由模式改成 `hash` 模式（这个很重要)，histroy模式在GitHubPages中不生效

2.4 处理项目build

打包文件路径需要对生成的index.html中需要加载的资源增加，github项目名称的前缀。

可根据自身项目进行处理

3. 发布项目

3.1 npm run build

3.2 npm run deploy

出现Pubished 表示成功

4. 在GitHubPages中展示

进入仓库页面，选择 1.Settings---> Pages

2.选择要展示的分支

点击 Save

等待几分钟刷新页面，点击Visit site就可以展示了

总结

以上就是GitHubPages展示的需要注意的点，XDM还有什么问题，可以再补充。

GitHubPages 踩坑，及遇到的问题