是否有人设法弄清楚如何使vue.js与github或gitlab页面一起使用 history mode？
它可以与hash mode一起使用，但我不想出于与SEO相关的原因使用hash mode。
Router模式的参考：https：//router.vuejs.org/en/esentials/history-mode.html
我在本文中找到了一个对我有用的解决方案。
要总结解决方案，我创建了以下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>
i然后在index.html中添加了此JavaScript：
(function(){
var redirect = sessionStorage.redirect;
delete sessionStorage.redirect;
if (redirect && redirect != location.href) {
history.replaceState(null, null, redirect);
}
})();
不确定gitlab页面，但是在github页面中，您可以通过404.html文件而不是index.html文件使用整个vue.js应用程序。只需将index.html文件重命名为部署时的404.html文件。
编辑：正如评论中指出的那样，这具有使GitHub/GitLab使用404状态代码为您的网站服务的副作用。
遇到同一问题，找到了这个问题＆amp;在上面尝试了两个解决方案，但没有运气。然后尝试将它们混合在一起：
在这里我的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')
它起作用
- https://feryardiant.github.io/static-spa/foo/bar/baz
- https://feryardiant.gitlab.io/static-spa/foo/bar/baz/baz
gitlab答案
对于使用GitLab的人，现在支持将 index.html 重定向，使用公共文件夹中的_redirects文件。
步骤：
- 在公共文件夹中创建一个名为
_redirects的文件 - 将此摘要行添加到该文件
/* /index.html 200
文档： https://docs.gitlab.com/ee/user/project/project/project/proect/redirects.html#rewrite-recrecrecrects-rewrite-requret-recrects-requests-to-a-requests-to-a-root-root-indexhtml
派对有点晚，但我有一种方法可以做到这一点。我正在使用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不会索引它。
您可以使用404.html hack https://github.com/rafrex/spa-github-pages/blob/gh-pages/404.html
或者您可以尝试将VUE预先渲染到静态HTMLhttps://nuxtjs.org/guide#static-generated-pre rendering-
基于Fery的解决方案，我认为在创建VUE实例时，不要处理重定向，而是可以更好地工作。
我基本上为索引路由添加了一个前守卫，以便将跳过索引页面并直接转到目标页面。
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 vue3＆amp;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",
然后，水疗中心很好〜