vue.js - 使用github / gitlab页面的vuejs历史模式

有没有人设法弄清楚如何使用GitHub或GitLab页面使用history mode使用Vue.js？

适用于hash mode，但我不想将hash mode用于与SEO相关的原因。

路由器模式参考：https://router.vuejs.org/en/essentials/history-mode.html

我在this article找到了一个适合我的解决方案。

为了总结解决方案，我创建了以下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>

然后我在index.html：

中添加了这个javascript

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

您可以使用404.html黑客https://github.com/rafrex/spa-github-pages/blob/gh-pages/404.html

或者你可以尝试将你的vue渲染成静态html https://nuxtjs.org/guide#static-generated-pre-rendering-

基于Fery的解决方案，我认为Navigation Guards可以更好地工作，而不是在创建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()
    }
  }
},
]

希望这会有所帮助。

碰到相同的问题，发现了这个问题并尝试了以上两种解决方法，但没有运气。然后尝试像这样组合它们：

这是我的404.html文件

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
    <script>
      // ========================================
      // Credits:
      // - https://stackoverflow.com/a/50259501
      // - https://stackoverflow.com/a/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')

它有效

聚会晚了一点，但是我有办法做到这一点。我正在使用Vue CLI 3和GitHub页面。

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

# 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不会将其编入索引。

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

以结帐my personal website为例。

使用github / gitlab页面的vuejs历史模式

6 个答案: