当前位置:   article > 正文

vue路由history模式刷新页面出现404问题_vue router mode 采用history模式 刷新页面 404

vue router mode 采用history模式 刷新页面 404

方案一 (这种方式容易被第三方劫持)

  1. location /{
  2. root /data/nginx/html;
  3. index index.html index.htm;
  4. error_page 404 /index.html;
  5. }

 方案二

  1. location /{
  2. root /data/nginx/html;
  3. index index.html index.htm;
  4. if (!-e $request_filename) {
  5. rewrite ^/(.*) /index.html last;
  6. break;
  7. }
  8. }

方案三 (vue.js官方教程里提到的https://router.vuejs.org/zh-cn/essentials/history-mode.html) 

  1. server {
  2. listen 8888;#默认端口是80,如果端口没被占用可以不用修改
  3. server_name localhost;
  4. root E:/vue/my_project/dist;#vue项目的打包后的dist
  5. location / {
  6. try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
  7. index index.html index.htm;
  8. }
  9. #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
  10. #因此需要rewriteindex.html中,然后交给路由在处理请求资源
  11. location @router {
  12. rewrite ^.*$ /index.html last;
  13. }
  14. #.......其他部分省略
  15. }

 仅记录一下出现问题的解决方法,供大家参考

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/619408
推荐阅读
相关标签
  

闽ICP备14008679号