将 Vue 部署到 GitHub 页面。vue-router 错误

Question

我在使用 vue-cli v3.0 部署 Vue 应用程序构建时遇到了一些麻烦。到 GitHub 页面。我使用子树dist将文件夹仅发送到gh-pages分支。首先，问题是找不到资产，但我使用baseUrlon修复了它vue.config.js。现在的问题是该#app元素为空。我发现如果我不使用vue-router（直接渲染视图而不是使用<router-view/>），该应用程序可以在 GitHub 页面上正常工作。我相信路线选项存在一些问题path，但我无法弄清楚如何解决它。

有问题的存储库是https://github.com/guizoxxv/vue-cli-deploy，GitHub 页面链接是https://guizoxxv.github.io/vue-cli-deploy/

谢谢。

Answer 1

2020年更新

\n\n

\n

baseUrl自 Vue CLI 3.3 起已弃用，请改用publicPath。

\n

\n\n

如果您使用的是 Vue CLI >= 3.3，您可能想查看这个 vue-cli 插件，它使用 github 操作自动部署 github 页面。

\n\n

\n

默认情况下，Vue CLI 假设您的应用程序将部署在域的根目录，例如https://www.my-app.com/。如果您的应用程序部署在子路径中，则需要使用此选项指定该子路径。例如，如果您的应用程序部署在https://www.foobar.com/my-app/，请将 baseUrl 设置为 \'/my-app/\'。所以 ：

\n

\n\n

\n
1. 在项目根目录下创建一个新文件，并将其命名为 \xe2\x80\x98vue.config.js\xe2\x80\x99
\n

2. 在 \xe2\x80\x98vue.config.js\xe2\x80\x99 文件中粘贴以下代码：

   \n\n

   module.exports = { baseUrl: \xe2\x80\x98/my-first-project/\xe2\x80\x99 }

\n

\n\n

注意：在 // 字符内的 baseUrl 中，您必须输入项目的名称。

\n\n

在这里阅读更多内容

\n\n

\n

另外，请阅读完整的文章如何在 github 页面中部署 vue.js 项目

\n

\n