vue路由history模式刷新页面出现404问题
2018-12-17 12:17
1651 查看
vue hash模式下,
URL中存在
'#',用
'history'模式就能解决这个问题。但是
history模式会出现刷新页面后,页面出现404。解决的办法是用
nginx配置一下。
在
nginx的配置文件中修改
方法一:
location /{ root /data/nginx/html; index index.html index.htm; if (!-e $request_filename) { rewrite ^/(.*) /index.html last; break; } }
方法二:
vue.js官方教程里提到的https://router.vuejs.org/zh/g...
server { listen 8081;#默认端口是80,如果端口没被占用可以不用修改 server_name myapp.com; root D:/vue/my_app/dist;#vue项目的打包后的dist location / { try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404 index index.html index.htm; } #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件 #因此需要rewrite到index.html中,然后交给路由在处理请求资源 location @router { rewrite ^.*$ /index.html last; } #.......其他部分省略 }阅读更多
相关文章推荐
- 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题
- vue小笔记 打包之后,刷新页面出现404的问题
- vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- vue-route+webpack单页路由项目,打包后访问正常刷新出现404问题
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- 单页面模式路由刷新404问题
- 关于Vue项目路由栏去除“#”的处理方法及其刷新页面时出现404问题
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- react,vue等部署单页面项目时,访问刷新出现404问题
- vue-router使用 history 模式刷新后404问题
- Vue路由history模式踩坑记录:nginx配置解决404问题
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- 解决vue 路由变化页面数据不刷新的问题
- vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
- Vue-router本地服务器使用history出现找不到页面的问题解决方法
- vue.js用vue-router路由传参时页面刷新后参数消失的问题
- angular2项目构建后部署到Tomcat刷新页面出现404的问题
- Vue项目History模式404问题解决