Vue.js 历史模式与 GitHub/GitLab 页面的配合使用

vue.jsvuejs2gitlabvue-routergitlab-ci

有没有人成功地让Vue.js与GitHub或GitLab Pages一起使用“history mode”?

它可以使用“hash mode”，但出于SEO相关原因，我不想使用“hash mode”。

路由模式的参考文献：https://router.vuejs.org/zh/guide/essentials/history-mode.html

- fisker

8个回答

阿里云服务器只需要99元/年，新老用户同享，点击查看详情

我在这篇文章中找到了适合我的解决方案。

总结一下，我创建了以下的404.html文件并将其添加到项目的根目录中。

<!DOCTYPE html>
<html>
    <head>
        <script>
            // ====================================================================================================================
            // This text is simply to make sure the 404.html file is bigger than 512 bytes, else, internet explorer will ignore it.
            // Thank you internet explorer for requiring such awesome workarounds in order to work properly
            // ====================================================================================================================
            sessionStorage.redirect = location.href;
        </script>
        <meta http-equiv="refresh" content="0;URL='/'">
    </head>
</html>

然后我将这个javascript添加到了index.html文件中：

(function(){
    var redirect = sessionStorage.redirect;
    delete sessionStorage.redirect;
    if (redirect && redirect != location.href) {
        history.replaceState(null, null, redirect);
    }
})();

- BobWithHair

这个 hack 以前可以用，但现在突然就不好使了，你有什么想法吗？ - Bestin John

好吧，这是一个hack。容易出问题。它所基于的文章是2016年的。 - adi518

如果您关心SEO，请不要使用此方法，这会使您在Google排名下降。请使用适当的修复方法并重定向回根文件（index.html）。 - Alex Y

对于GitLab Pages是否可以这样做不确定，但在GitHub Pages中，您可以通过404.html文件而不是index.html文件来提供整个Vue.js应用程序。只需在部署时将index.html文件重命名为404.html文件。

编辑：如评论所指出的，这会导致GitHub/GitLab使用404状态代码为您提供网站。

- Giorgio Acquati

在GitLab Pages上，我于2021年01月17日成功运行。 - aimorris

只有一个问题。主页返回的是404状态而不是200状态。因此，一些其他工具不想读取我的网站。 - noisy

在GitlabPages - GitlabEE 12.8.6中，于2021年7月13日对我有效。 - eti_nne

如果您关心SEO，请不要使用此方法，这会使您在Google排名下降。请使用适当的修复方法并重定向回根文件（index.html）。 - Alex Y

遇到了同样的问题，发现了这个问题并尝试了上面提供的两种解决方案，但都没有成功。然后尝试将它们组合在一起，像这样：

这是我的404.html文件：

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
    <script>
        // ========================================
        // Credits:
        // - https://dev59.com/oFYN5IYBdhLWcg3wRmeh#50259501
        // - https://dev59.com/oFYN5IYBdhLWcg3wRmeh#50247140
        // ========================================
        const segment = 1

        sessionStorage.redirect = '/' + location.pathname.slice(1).split('/').slice(segment).join('/')

        location.replace(
            location.pathname.split('/').slice(0, 1 + segment).join('/')
        )
    </script>
</head>
</html>

这是我的main.js文件

const app = new Vue({
    router,
    store,
    render: h => h(App),
    created () {
        if (sessionStorage.redirect) {
            const redirect = sessionStorage.redirect
            delete sessionStorage.redirect
            this.$router.push(redirect)
        }
    }
})

app.$mount('#app')

它可以正常工作

- Fery W

GitLab解答

对于使用GitLab的用户，现在可以通过在公共文件夹中使用_redirects文件来重定向到index.html。

步骤:

在公共文件夹中创建名为_redirects的文件
将此代码行添加到该文件中

    /* /index.html 200

文档：https://docs.gitlab.com/ee/user/project/pages/redirects.html#rewrite-all-requests-to-a-root-indexhtml

该文档介绍如何将所有页面请求重写为根目录下的 index.html。

- Alex Y

如果有人正在寻找示例，请查看 https://gitlab.com/WaldemarLehner/vite-vue3-vuerouter-gitlab-pages-starter（代码）和 https://waldemarlehner.gitlab.io/vite-vue3-vuerouter-gitlab-pages-starter/（GitLab Pages 实例）。此特定示例使用 Vite 作为其打包工具。 - Waldemar Lehner

在我的情况下，即使使用自定义域名，这个额外的行/_nuxt/* /_nuxt/:splat也起作用。 - Paolo Falomo

虽然有点晚了，但我有一种方法可以实现这一点。我正在使用Vue CLI 3和GitHub pages。

首先，我将所有的源文件提交到一个源分支中，并使用以下shell命令将dist文件夹（由Vue生成）提交到主分支：

# deploy.sh

#!/usr/bin/env sh

# abort on errors
set -e


# build
echo Building. this may take a minute...
npm run build

# navigate into the build output directory
cd dist
# create a copy of index.html
cp index.html 404.html
find . -name ".DS_Store" -delete

# if you are deploying to a custom domain
echo 'custom.com' > CNAME

# remove git and reinitialise
rm -rf .git
echo Deploying..
git init
git add -A
git commit -m 'deploy'

# deploy
git remote add origin https://github.com/User/repo.github.io
git push origin master --force

cd -
rm -rf dist

当GitHub页面找不到路由时，它会使用404.html。我编写的部署程序复制了index.html并将其命名为404.html。这就是为什么它能工作的原因。编辑刚刚意识到这对于SEO来说并不好，因为它返回一个404响应，而Google不会对其进行索引。

- Palash Sharma

你可以使用404.html hack：https://github.com/rafrex/spa-github-pages/blob/gh-pages/404.html。或者你可以尝试将 vue 预渲染为静态 HTML：https://nuxtjs.org/guide#static-generated-pre-rendering-。

- Morty Choi

这种“hack”在GitLab中不起作用，遗憾。但是这个可以！ - Joel Bourbonnais

根据Fery的解决方案，我认为在创建Vue实例时处理重定向的方法不如使用导航守卫更好。

我基本上为索引路由添加了一个beforeEnter守卫，这样索引页面将被跳过，直接进入目标页面。

const routes = [
{
  path: '/',
  component: Index,
  beforeEnter: (to, from, next) => {
    if (sessionStorage.getItem('redirect') !== null) {
      const redirect = sessionStorage.redirect
      delete sessionStorage.redirect
      next(redirect)
    } else {
      next()
    }
  }
},
]

希望这对您有所帮助。

- Raymond Nook

2021年Vue3和Vue-cli的解决方案：

按照以下“基本说明”进行操作：

https://github.com/rafgraph/spa-github-pages#usage-instructions

无需更改 var pathSegmentsToKeep = 0; 在 404.html 文件中。

然后在 vue.config.js 中：

  // do not use "./dist/"
  publicPath: "/dist/",
  // make the index.html file place at the root of the repo
  indexPath: "../index.html",

那么SPA就可以开始了~

- Jun Huang

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，