Vue改用history模式后Nginx代理报404

由于以前VUE采用hash模式:

hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）
比如：http://abc.example.com/abc/#/hello，hash 的值为 #/hello

现采用history模式:

history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）

比如：http://abc.example.com/abc/hello，路由hello

但在用nginx代理时，刷新路由时报404错误，经过网上资料和实测，通过在location中添加核心代码来解决：

try_files $uri $uri/ /index.html; # vue history

但该代码仅适用于"location /"根的情况，如果是“location /abc”子项目方式，则需要调整代码：

try_files $uri $uri/ /abc/index.html; # vue history

附Nginx完整配置：

server {listen       3010;server_name  abc.example.com;include   mime.types;default_type  application/octet-stream;location /abc {alias   /usr/local/nginx/html/abc-frontend/;index  index.html index.htm;error_page 404 /index.html;try_files $uri $uri/ /abc/index.html; # vue history}#接口服务location /abc/api {proxy_pass http://192.168.0.110:9010/api/;proxy_http_version 1.1;proxy_set_header Host $host:$server_port;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}}

Vue改用history模式后Nginx代理报404相关推荐

每天一点点之vue框架开发 - History 模式下线上路由报404错误
vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
在nginx上部署vue项目(history模式)；
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
nginx导致vue设置history模式下的请求丢失参数
nginx导致vue设置history模式下的请求丢失参数问题描述: 当访问下面的路径时参数会丢失: http://ip/vuecay/path1/path2?name=cay 演示效果: 可以看到 ...
在nginx上部署vue项目(history模式)--demo实列；
转载地址:https://www.cnblogs.com/573734817pc/p/11057677.html 在很早之前,我写了一篇关于在nginx上部署vue项目(history模式) 但是 ...
vue使用history模式页面空白
之前负责了一个项目,使用的是vue.为了避免在地址链接的时候出现问题后端要求去掉#号,也就是使用history模式. 更改history模式后打包部署后发现页面空白.查询了下官网的文档资料https: ...
新来的前端小姐姐问：Vue路由history模式刷新页面出现404问题
摘要:vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 本文分享自华为云社区<学习Vue Rou ...
解决Vue的history模式刷新页面出现404的问题
解决Vue的history模式刷新页面出现404的问题路由的两种工作模式 (一).hash模式地址中永远带着#号,不美观若以后将地址通过第三方手机app分享,若app校验严格,地址会被标记为不合 ...
try_files $uri $uri vue-router的history模式，nginx配置 try_files 含义
vue-router的history模式,nginx配置 try_files 含义假设请求 127.0.0.1/home location / {root html/dist;try_files $ ...
history模式 nginx配置_nginx反向代理部署vue项目(history模式)的方法
前言: 根据标题我们要区分出两个信息 1. history 模式部署 ( vue的路由模式如果使用history,刷新会报404错误.) 2. Nginx 做反向代理问题1思考: vue-route ...

Vue改用history模式后Nginx代理报404

Vue改用history模式后Nginx代理报404相关推荐

最新文章

热门文章