vue框架下部署上线后刷新报404问题的解决方案(推荐)

2023-08-25 02:29:04 289


RewriteEngineOn
RewriteBase/
RewriteRule^index\.html$-[L]
RewriteCond%{REQUEST_FILENAME}!-f
RewriteCond%{REQUEST_FILENAME}!-d
RewriteRule./index.html[L]

nginx配置

location/{
try_files$uri$uri//index.html;
}

vuehistory模式下nginx配置

服务端nginx的一开始配置如下（假设域名为：xx.xxx.com）：[*****~]#cat/Data/app/nginx/conf/vhosts/xx.xxx.com.conf

server{
listen80;

server_nametestwx.wangshibo.com;
root/Data/app/xqsj_wx/dist;
indexindex.html;

access_log/var/log/testwx.logmain;

}

修改如下:

server{
listen80;

server_nametestwx.wangshibo.com;
root/Data/app/xqsj_wx/dist;
indexindex.html;
access_log/var/log/testwx.logmain;

##注意从这里开始
location/{
try_files$uri$uri/@router;
indexindex.html;
}

location@router{
rewrite^.*$/index.htmllast;
}
}

原生Node.js

consthttp=require('http')
constfs=require('fs')
consthttpPort=80
http.createServer((req,res)=>{
fs.readFile('index.htm','utf-8',(err,content)=>{
if(err){
console.log('Wecannotopen"index.htm"file.')
}
res.writeHead(200,{
'Content-Type':'text/html;charset=utf-8'
})
res.end(content)
})
}).listen(httpPort,()=>{
console.log('Serverlisteningon:http://localhost:%s',httpPort)
})

基于Node.js的Express

对于Node.js/Express，请考虑使用connect-history-api-fallback中间件

InternetInformationServices(IIS)

安装IISUrlRewrite

在你的网站根目录中创建一个web.config文件，内容如下：

Caddy

rewrite{
regexp.*
to{path}/
}

Firebase主机

在你的firebase.json中加入：

{
"hosting":{
"public":"dist",
"rewrites":[
{
"source":"**",
"destination":"/index.html"
}
]
}
}

最后

给个警告，因为这么做以后，你的服务器就不再返回404错误页面，因为对于所有路径都会返回index.html文件。为了避免这种情况，你应该在Vue应用里面覆盖所有的路由情况，然后在给出一个404页面。

constrouter=newVueRouter({
mode:'history',
routes:[
{path:'*',component:NotFoundComponent}
]
})

总结

以上所述是小编给大家介绍的vue框架下部署上线后刷新报404问题的解决方案(推荐)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue框架下部署上线后刷新报404问题的解决方案(推荐)

热门推荐

随机推荐