Question

使用vue-cli v3.0部署Vue应用程序时，我遇到了一些麻烦。到GitHub页面。我使用subtree仅将dist文件夹发送到gh-pages分支机构。首先问题是assets where not found，但我在baseUrl上使用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

我相信我已找到导致此问题的原因：

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

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

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

Answer 2

默认情况下，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页面here上部署vue.js项目

Answer 3

你能在main.js中试试这个吗？新的Vue（{ el：＆＃39;＃app＆＃39;，路由器，组件：{App}，模板：＆＃39;＆lt; App /＆gt;＆＃39;， }）;

Answer 4

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

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

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

4 个答案: