将 Vue 部署到 GitHub 页面。 Vue路由器出错

Posted 2023-02-22

【中文标题】将 Vue 部署到 GitHub 页面。 Vue路由器出错

【英文标题】：Deploy Vue to GitHub Pages. Error with vue-router

【发布时间】：2018-10-14 23:49:58

【问题描述】：

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

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

谢谢。

【参考方案1】：

2020 年更新

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

如果您使用的是 Vue CLI >= 3.3，您可能需要查看 this vue-cli plugin，它使用 github 操作自动部署 github 页面。

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

在项目根目录下新建一个文件，命名为“vue.config.js”

在‘vue.config.js’文件中粘贴以下代码：

module.exports = baseUrl: ‘/my-first-project/’

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

阅读更多here

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

【讨论】：

baseUrl 属性现已弃用。我们应该改用publicPath。 cli.vuejs.org/config/#publicpath

OP 询问 vue-cli 3.0。 baseUrl 在 3.3 中已弃用。但是我更新了我的答案

是的，我看到这个问题是在 18 年提出的。这只是一个提醒，它现在已被弃用。 :)

【参考方案2】：

我相信我发现了这个问题的原因：

因为 GitHub Pages URL 不是从根目录提供的

https://guizoxxv.github.io/vue-cli-deploy/ 在根 / 之后有 vue-cli-deploy/

我需要在vue-router 选项上为我的应用程序指定一个base 选项。这是文档https://router.vuejs.org/api/#base

【参考方案3】：

你能在你的 main.js 中试试这个吗

new Vue(
    el: '#app',
    router,
    components:  App ,
    template: '<App/>',
);

【参考方案4】：

正如他们所说，baseUrl 已弃用，请使用publicPath

module.exports =  publicPath: '/your-repo/'