fis*_*ker 13 gitlab gitlab-ci vue.js vue-router vuejs2
有没有人设法弄清楚如何让 Vue.jshistory mode与 GitHub 或 GitLab Pages一起工作？
它适用于hash mode，但我不想hash mode用于 SEO 相关的原因。
路由器模式参考：https : //router.vuejs.org/en/essentials/history-mode.html
小智 9
我在本文中找到了适合我的解决方案。
为了总结解决方案，我创建了以下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：
(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 文件。
亚搏体育appGitLab答案
对于使用 GitLab 的用户，现在支持使用公共文件夹中的文件重定向到index.html 。_redirects
脚步：
_redirects在公用文件夹中创建一个名为的文件 /* /index.html 200
遇到同样的问题，发现了这个问题并尝试了上述两种解决方案，但没有运气。然后尝试像这样组合它们：
这是我的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')
它有效
聚会有点晚了，但我有办法做到这一点。我正在使用 Vue CLI 3 和 GitHub 页面。
首先，我将所有源文件提交到源分支，并dist使用以下 shell 命令将文件夹（由 Vue 生成）提交到 master 分支：
# 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黑客https://github.com/rafrex/spa-github-pages/blob/gh-pages/404.html
或者您可以尝试将 vue 预渲染为静态 html https://nuxtjs.org/guide#static- generated-pre-rendering-
| 归档时间： |
|
| 查看次数： |
4981 次 |
| 最近记录： |