vue框架下部署上线后刷新报404问题怎么办
这篇文章主要介绍vue框架下部署上线后刷新报404问题怎么办,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
10年积累的网站设计、成都网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站制作后付款的网站建设流程,更有绿园免费网站建设让你可以放心的选择与我们合作。
RewriteEngine On 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; }
vue history模式下nginx配置
服务端nginx的一开始配置如下(假设域名为:xx.xxx.com): [***** ~]# cat /Data/app/nginx/conf/vhosts/xx.xxx.com.conf
server { listen 80; server_name testwx.wangshibo.com; root /Data/app/xqsj_wx/dist; index index.html; access_log /var/log/testwx.log main; }
修改如下:
server { listen 80; server_name testwx.wangshibo.com; root /Data/app/xqsj_wx/dist; index index.html; access_log /var/log/testwx.log main; ## 注意从这里开始 location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; } }
原生 Node.js
const http = require('http') const fs = require('fs') const httpPort = 80 http.createServer((req, res) => { fs.readFile('index.htm', 'utf-8', (err, content) => { if (err) { console.log('We cannot open "index.htm" file.') } res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' }) res.end(content) }) }).listen(httpPort, () => { console.log('Server listening on: http://localhost:%s', httpPort) })
基于 Node.js 的 Express
对于 Node.js/Express,请考虑使用 connect-history-api-fallback 中间件
Internet Information Services (IIS)
安装 IIS UrlRewrite
在你的网站根目录中创建一个 web.config 文件,内容如下:
Caddy
rewrite { regexp .* to {path} / }
Firebase 主机
在你的 firebase.json 中加入:
{ "hosting": { "public": "dist", "rewrites": [ { "source": "**", "destination": "/index.html" } ] } }
最后
给个警告,因为这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。
const router = new VueRouter({ mode: 'history', routes: [ { path: '*', component: NotFoundComponent } ] })
以上是“vue框架下部署上线后刷新报404问题怎么办”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
网站名称:vue框架下部署上线后刷新报404问题怎么办
文章网址:http://scyanting.com/article/gsoggc.html