带有 github/gitlab 页面的 vuejs 历史模式

Posted 2023-02-19

技术标签:

【中文标题】带有 github/gitlab 页面的 vuejs 历史模式【英文标题】：vuejs history mode with github/gitlab pages 【发布时间】：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

【问题讨论】：

【参考方案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://***.com/a/50259501
        // - https://***.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')

它有效

https://feryardiant.github.io/static-spa/foo/bar/baz https://feryardiant.gitlab.io/static-spa/foo/bar/baz

【讨论】：

【参考方案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。

步骤：

_redirects

片段：

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

那么水疗很好去~

【讨论】：

以上是关于带有 github/gitlab 页面的 vuejs 历史模式的主要内容，如果未能解决你的问题，请参考以下文章

带有innerhtml的Vuejs

可以在呈现的 html 中使用带有模板的 VueJS SFC 组件吗？

使用 axios 的带有 vuejs 的 framework7

vuejs 从子组件更新父数据

如何用github/gitlab做代码review