在使用Vue项目部署到Github Pages时遇到的问题。

Question

我正在尝试将vue-cli项目部署到github pages上，我按照这个网站和github支持的说明进行操作。

将vue-cli部署到github pages: https://medium.com/@mwolfhoffman/deploying-to-github-pages-with-vue-webpack-cli-5b2ba17f14a0 配置github pages： https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/ 引用： 设置 -> source -> master /docs 在存储库的根目录中有一个/docs文件夹 不遵循存储库命名方案username.github.io或orgname.github.io

这是我的存储库：https://github.com/leewei05/blog 但结果仍然给出404错误，我仍然不知道我的问题是什么，请帮忙！

- Lee

Answer 1

原来我使用了错误的配置路径，下面是将新的vue-cli项目部署到github pages的步骤。

(你需要先安装npm和vue-cli)

1. $ vue init webpack [项目名称]
2. $ cd [项目名称]
3. $ npm install
4. 进入config/index.js文件
5. 像这样修改build部分:

build: {
    index: path.resolve(__dirname, '../docs/index.html'),
    assetsRoot: path.resolve(__dirname, '../docs'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '',
    productionSourceMap: true,
    devtool: '#source-map',
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }

6. $ npm run build
7. 将其推到您的GitHub代码仓库中
8. 进入您代码仓库的设置页面
9. 找到GitHub Pages部分，将源更改为'master' -> 'master/docs'
10. 您的页面应该在https://[userName].github.io/[repositoryName]/#/上
11. 祝你好运！

- Lee

---

嘿，我似乎无法更改你上面提到的第9步中的源代码？ - Akin Hwan

@AkinHwan，您需要拥有仓库的完整管理员权限，然后您应该能够在“设置”>“选项”选项卡> Github Pages部分中找到设置，将“源”从“主分支”更改为“主分支/docs文件夹”。 - Evolve

@Evolve 是的，我确实是 akinhwan.github.io 的管理员。看起来当我访问 akinhwan.github.io/docs/index.html 时，我可以看到我的网站。我想我需要创建一个新分支？ - Akin Hwan

@Lee 如果您在选项的“来源”部分看不到下拉菜单怎么办？ - Akin Hwan

如果您想要自动化这个过程，我在这里发布了一个类似问题的解决方案：https://dev59.com/FrTma4cB1Zd3GeqP8Y5B#56638750 - 不过它使用的是 gh-pages 分支而不是 docs 文件夹。 - Brandon Franklin