博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
VUE路由history模式坑记--NGINX
阅读量:5319 次
发布时间:2019-06-14

本文共 1185 字,大约阅读时间需要 3 分钟。

因微信分享和自动登录需要,

对于URL中存在'#'的地址,处理起来比较坑(需要手动写一些代码来处理)。还有可能会有一些隐藏的问题没被发现。

如果VUE能像其他(JSP/PHP)系统的路径一样,就不存在这些问题了。


对于VUE的router[mode: history]模式在开发的时候,一般都不出问题。是因为开发时用的服务器为node,Dev环境中自然已配置好了。

但对于放到nginx下运行的时候,自然还会有其他注意的地方。总结如下:

在nginx里配置了以下配置后, 可能首页没有问题,链接也没有问题,但在点击刷新后,页面就无法显示了(404)

location /{        root   /data/nginx/html;        index  index.html index.htm;    }

为了解决404,需要通过以下两种方式:

方式一

location /{        root   /data/nginx/html;        index  index.html index.htm;        error_page 404 /index.html;    }

方式二

location /{        root   /data/nginx/html;        index  index.html index.htm;        if (!-e $request_filename) {            rewrite ^/(.*) /index.html last;            break;        }    }

这样问题好像就可以解决了。

此外,如果VUE应用没有发布在域名的目录根下,比如[

那么除了上述配置:

 

location /wx{        root   /data/nginx/html;        index  index.html index.htm;        #error_page 404 /wx/index.html;        if (!-e $request_filename) {            rewrite ^/(.*) /wx/index.html last;            break;        }    }

还应该在VUE项目里把每个路径加上[/wx]这一段(或者指定base: '/wx/'),要不页面会显示为空白:

以上几种方案基本上已经能把坑填上了,如果还有其他问题,比如浏览器版本低不支持什么的,不要来问了。

希望大家使用rewrite 的方式进行处理,404的方式会被第三方劫持!!!

转载于:https://www.cnblogs.com/haonanZhang/p/9791983.html

你可能感兴趣的文章
备忘录模式实例1
查看>>
NHibernate教程(9)一1对n关联映射
查看>>
Java程序设计-v01
查看>>
js中的三种函数写法
查看>>
高精度1--加法
查看>>
Laravel框架之Response操作
查看>>
Centos-创建目录-mkdir
查看>>
Ubuntu 12.04 Firefox/Chromium缺少Flash Player问题
查看>>
在线文件管理器elFinder支持中文
查看>>
String比较
查看>>
get the code of function in matlab
查看>>
Django之Models
查看>>
动态添加SqlParameter
查看>>
SQLServer:探讨EXEC与sp_executesql的区别详解
查看>>
NoSuchProviderException异常
查看>>
Spring缓存注解@Cache使用
查看>>
编辑器的选择 西安电子科技大学第二届程序设计新生赛(同步赛)
查看>>
db2 执行报错收集
查看>>
CSS 透明度级别 及 背景透明
查看>>
Linux定时任务(crond)
查看>>