Nginx学习笔记（六）Vue路由包含#导致的Nginx无法转发问题

1.问题场景

• 项目规定在上线时需要将系统的前端页面改为展示“系统维护中”字样的割接页面；
• 前端使用的是Vue，所以割接页面的地址应该为 http://localhost/views/#/maintaining;
• 由于地址中包含#，所以nginx配置一直不生效，一直404。

正常访问页面配置：

location /views/ {
    alias /p/views/;
}

改为系统维护中页面后，不生效配置：

location /views/ {
    # alias /p/views/;
    alias /p/views/#/maintaining;
}

---

2.解决方法

用两个location，第一个负责重写地址栏，第二个负责正常代理。

挂载割接页面后生效配置：

# 1.修改地址栏，将请求强制重写到割接页面
location /views/ {
    # alias /p/views/;
    rewrite ^/(.*)$ http://localhost/views-maintaining/#/maintaining permanent;
}

# 2.正常代理，展示割接页面
location /views-maintaining/ {
    alias /p/views/;
}

（注意：尝试的时候记得一定要清缓存，这块儿很容易因为浏览器缓存导致不生效。）

整理完毕，完结撒花~