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

Question

我在部署使用 vue-cli v3.0 构建的 Vue 应用程序时遇到了一些问题。至 GitHub 页。我正在使用 subtree to send the dist folder only to gh-pages branch. First the problem was that the assets where not found，但我在 vue.config.js 上使用 baseUrl 修复了它。现在的问题是 #app 元素是空的。我发现如果我不使用 vue-router（直接呈现视图而不是使用 <router-view/>），该应用程序可以在 GitHub 页面上正常工作。我相信路线 path 选项存在一些问题，但我无法弄清楚如何解决它。

有问题的存储库是 https://github.com/guizoxxv/vue-cli-deploy and the GitHub Page link is https://guizoxxv.github.io/vue-cli-deploy/

谢谢。

Answer 1

你能在 main.js

中试试这个吗

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

Answer 2

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

因为 GitHub 页面 URL 不是从根

提供的

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

之后有 vue-cli-deploy/

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

Answer 3

2020 年更新

baseUrl is Deprecated since Vue CLI 3.3, please use publicPath instead.

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

By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g. https://www.my-app.com/. If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at https://www.foobar.com/my-app/, set baseUrl to '/my-app/'. So :

在项目的根目录中创建一个新文件并将其命名为“vue.config.js”
在“vue.config.js”文件中粘贴以下代码：

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

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

阅读更多here

Also, read a full article how to deploy vue.js project in github pages here

Answer 4

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

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

Answer 5

对于Vue3，请进行如下配置：

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory('/your-github-repo/'),
  routes: [
   // put your routes
  ]
});

对于Vue2，请进行如下配置：

import VueRouter from 'vue-router';

const router = new VueRouter({
  mode: 'history',
  base: '/your-github-repo/',
  routes: [
    // put your routes
  ]
});

如果问题仍然存在，请在您的 vue 应用程序的根位置创建 vue.config.js 文件并添加以下代码：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
  ? '/your-github-repo/' // note the trailing slash
  : '/',
}

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

Deploy Vue to GitHub Pages. Error with vue-router

github-pages

vue.js

vue-router

vue-cli