有没有人设法弄清楚如何使 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
我在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 文件
<!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')
它有效
【讨论】：
不确定 GitLab 页面，但在 GitHub 页面中，您可以通过 404.html 文件而不是 index.html 文件来提供整个 Vue.js 应用程序。只需在部署时将 index.html 文件重命名为 404.html 文件。
【讨论】：
您可以使用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-
【讨论】：
聚会有点晚了，但我有办法做到这一点。我正在使用 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 不会将其编入索引。
【讨论】：
基于 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()
}
}
},
]
希望这有帮助。
【讨论】：
2021 年答案
对于使用 GitLab 的用户，现在支持使用公共文件夹中的 _redirects 文件重定向到 index.html。
步骤：
_redirects 的文件片段：
/* /index.html 200
【讨论】：
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",
那么水疗很好去~
【讨论】：