有没有人成功地让Vue.js与GitHub或GitLab Pages一起使用“history mode”?
它可以使用“hash mode”,但出于SEO相关原因,我不想使用“hash mode”。
路由模式的参考文献:https://router.vuejs.org/zh/guide/essentials/history-mode.html
有没有人成功地让Vue.js与GitHub或GitLab Pages一起使用“history mode”?
它可以使用“hash mode”,但出于SEO相关原因,我不想使用“hash mode”。
路由模式的参考文献:https://router.vuejs.org/zh/guide/essentials/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>
然后我将这个javascript添加到了index.html
文件中:
(function(){
var redirect = sessionStorage.redirect;
delete sessionStorage.redirect;
if (redirect && redirect != location.href) {
history.replaceState(null, null, redirect);
}
})();
对于GitLab Pages是否可以这样做不确定,但在GitHub Pages中,您可以通过404.html文件而不是index.html文件来提供整个Vue.js应用程序。只需在部署时将index.html文件重命名为404.html文件。
编辑: 如评论所指出的,这会导致GitHub/GitLab使用404状态代码为您提供网站。
遇到了同样的问题,发现了这个问题并尝试了上面提供的两种解决方案,但都没有成功。然后尝试将它们组合在一起,像这样:
这是我的404.html
文件:
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<script>
// ========================================
// Credits:
// - https://dev59.com/oFYN5IYBdhLWcg3wRmeh#50259501
// - https://dev59.com/oFYN5IYBdhLWcg3wRmeh#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解答
对于使用GitLab的用户,现在可以通过在公共文件夹中使用_redirects
文件来重定向到index.html。
步骤:
_redirects
的文件 /* /index.html 200
该文档介绍如何将所有页面请求重写为根目录下的 index.html。
/_nuxt/* /_nuxt/:splat
也起作用。 - Paolo Falomo虽然有点晚了,但我有一种方法可以实现这一点。我正在使用Vue CLI 3和GitHub pages。
首先,我将所有的源文件提交到一个源分支中,并使用以下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 预渲染为静态 HTML:https://nuxtjs.org/guide#static-generated-pre-rendering-。
根据Fery的解决方案,我认为在创建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年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",
那么SPA就可以开始了~