将 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 cli 3.x 项目部署到 github pages