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

Posted

技术标签:

【中文标题】将 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/' 

【讨论】:

以上是关于将 Vue 部署到 GitHub 页面。 Vue路由器出错的主要内容,如果未能解决你的问题,请参考以下文章

github如何托管页面部署静态资源部署vue静态资源的步骤和遇到的问题

vue采用history路由的服务器部署问题

vue项目用nginx写好项目本地先试试路路径问题

vue cli 3.x 项目部署到 github pages

Vue 项目部署到GitHub Pages并同步到Gitee Pages

关于vue项目部署之后,刷新丢页面问题