因微信分享和自动登录需要,
对于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 /index.html;
}

方式二

    location /{

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

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

此外,如果VUE应用没有发布在域名的目录根下,比如[http://xxx.com/wx/]
那么除了上述配置:

location /wx{

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

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

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

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

VUE路由history模式坑记--NGINX的更多相关文章

  1. K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序

    背景 首先这标题有点绕,我先解释下: 首先我们有静态服务器,上面某个目录有Vue路由history模式打包的应用程序(也就是build后的产物): 但是静态服务器一般不做对外域名用的,我们需要在k8s ...

  2. Vue路由history模式踩坑记录:nginx配置解决404问题

    问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使 ...

  3. vue路由history模式刷新页面出现404问题

    vue hash模式下,URL中存在'#',用'history'模式就能解决这个问题.但是history模式会出现刷新页面后,页面出现404.解决的办法是用nginx配置一下.在nginx的配置文件中 ...

  4. 新来的前端小姐姐问:Vue路由history模式刷新页面出现404问题

    摘要:vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 本文分享自华为云社区<学习Vue Rou ...

  5. vue路由history模式下打包node服务器配置

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  6. vue路由history模式,nginx配置

    nginx配置内容 # For more information on configuration, see: # * Official English Documentation: http://n ...

  7. 解决vue路由history模式刷新后404的问题

    server { listen ;#默认端口是80,如果端口没被占用可以不用修改 server_name localhost; root E:/vue/my_project/dist;#vue项目的打 ...

  8. vue路由history模式刷新404问题解决方案

    更改router 的base // biz是二级目录,路由文件改成 const router = new VueRouter({ mode: 'history', // base: process.e ...

  9. 在nginx上部署vue项目(history模式);

    在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...

随机推荐

  1. golang 的GOPATH设置的问题

    go run footer.go 的时候呢, go会依次去GOPATH 和GOROOT设置的对应路径下面找对应的包(目录和文件) 找的时候呢, 会在GoPATH 和GOROOT对应的目录后面再加一层路 ...

  2. ubuntu Change Language

    慎用 所謂的語系(locale),其實包含語言及地區的設定,因為除了語言之外,國家與國家的日期表示方式.數字格式.貨幣符號.度量單位可能都不一樣,所以才會有了這個locale的發明,依照國家和語言給予 ...

  3. Android:Unable to resolve target ‘android-8’问题解决

    在学习过程中,下载别人写过的代码,导入到eclipse,报错: Unable to resolve target 'android-8' 问题是项目版本号问题. 解决方法例如以下: 右击项目:Prop ...

  4. 从Linux 2.6.8内核的一个TSO/NAT bug引出的网络问题排查观点(附一个skb的优化点)

    梦中没有错与对,梦中没有恨和悔...最好闭上你的嘴.这样才算可爱...我不会说:这不公道,我不能接受.我会用朴素的文字记录点点滴滴,早上4点多起来,一气呵成最近的收获与评价,愤慨与忏悔. 四年多前的一 ...

  5. Python3基础(七) I/O操作

    一个程序可以从键盘读取输入,也可以从文件读取输入:而程序的结果可以输出到屏幕上,也可以保存到文件中便于以后使用.本文介绍Python中最基本的I/O函数. 一.控制台I/O 读取键盘输入 内置函数in ...

  6. jedis 2.7.2 jar

    jedis 2.7.2 已经公布. 源码https://github.com/xetorthio/jedis/releases/tag/jedis-2.7.2 jar 下载地址  http://dow ...

  7. side-stepping the Global Interpreter Lock by using subprocesses instead of threads

    16.6. multiprocessing — Process-based “threading” interface — Python 2.7.14 documentation https://do ...

  8. ALSA声卡驱动中的DAPM详解之五:建立widget之间的连接关系

    前面我们主要着重于codec.platform.machine驱动程序中如何使用和建立dapm所需要的widget,route,这些是音频驱动开发人员必须要了解的内容,经过前几章的介绍,我们应该知道如 ...

  9. 码位(code position/point)Unicode 编码与 Python 2/3 编码兼容性问题

    Unicode HOWTO 0. 码位(code position/point) 一个码位由某个数值表示,全部码位共同构成其码值空间(code space). ASCII,0~7Fhex(128) 拓 ...

  10. [HNOI2006]潘多拉的宝盒

    https://www.zybuluo.com/ysner/note/1250303 题面 给定\(s\)个自动机,如果某个自动机\(A\)能产生的所有串都能在自动机\(B\)中产生(即走相同\(0/ ...