【问题标题】:vuejs history mode with github/gitlab pages带有 github/gitlab 页面的 vuejs 历史模式
【发布时间】:2018-05-20 12:10:30
【问题描述】:

有没有人设法弄清楚如何使 Vue.js 与 history mode 与 GitHub 或 GitLab Pages 一起工作?

它适用于hash mode,但出于与 SEO 相关的原因,我不想使用 hash mode。

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

【问题讨论】:

    标签: vue.js vuejs2 gitlab vue-router gitlab-ci


    【解决方案1】:

    我在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);
        }
    })();
    

    【讨论】:

    • 这个 hack 以前有效,但现在没有任何想法?
    • 嗯,这是一个黑客。容易断裂。它所依据的文章来自 2016 年。?
    【解决方案2】:

    遇到同样的问题,发现了这个问题并尝试了上述两种解决方案,但没有运气。然后尝试像这样组合它们:

    这是我的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')
    

    它有效

    【讨论】:

      【解决方案3】:

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

      【讨论】:

      • 2021 年 17 月 1 日在 GitLab 页面中为我工作
      • 一个问题。主页将返回 404 状态而不是 200。因此,其他一些工具不想阅读我的网站。
      • 为我工作,13/07/2021 在 GitlabPages - GitlabEE 12.8.6
      【解决方案4】:

      您可以使用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-

      【讨论】:

      • 不幸的是,这个“hack”在 GitLab 中不起作用。 This 工作了!
      【解决方案5】:

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

      首先,我将所有源文件提交到一个源分支,并使用以下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 不会将其编入索引。

      【讨论】:

        【解决方案6】:

        基于 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()
            }
          }
        },
        ]
        

        希望这有帮助。

        【讨论】:

          【解决方案7】:

          2021 年答案

          对于使用 GitLab 的用户,现在支持使用公共文件夹中的 _redirects 文件重定向到 index.html。

          步骤:

          1. 在公用文件夹中创建一个名为_redirects 的文件
          2. 将此 sn-p 行添加到该文件中

          片段:

          /* /index.html 200
          

          您可以在这里阅读: https://docs.gitlab.com/ee/user/project/pages/redirects.html#rewrite-all-requests-to-a-root-indexhtml

          【讨论】:

            【解决方案8】:

            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",
            

            那么水疗很好去~

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 2018-05-17
              • 2021-02-04
              • 2018-04-03
              • 1970-01-01
              • 2020-01-27
              • 2018-11-24
              • 1970-01-01
              • 2018-04-27
              相关资源
              最近更新 更多