vue项目上线路径跳转无效(404问题)的解决

在近期做的一个小项目中，本地路由跳转没有任何问题，使用nginx部署上线后出现很多路由无法跳转的问题。

经过一番研究，发现可以通过以下两种方式解决。

一、将路由改为hash模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会向后端发出请求。

为什么hash模式下没有问题

router hash 模式我们都知道是用符号#表示的，如 website.com/#/login, hash 的值为 #/login

它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对服务端完全没有影响，因此改变 hash 不会重新向服务端发送请求。而改变hash，在hash模式中会被hashChange方法所捕获，在vue中会触发页面的修改。

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 website.com/#/login 只有 website.com 会被包含在请求中 ，因此对于服务端来说，即使没有配置location，也不会返回404错误

具体操作：找到router文件夹下的index.js文件，将mode改为hash

二、history模式后端配置nginx

如果觉得hash模式的路由模式显示在地址栏有 “#” 不好看，想使用history模式，就需要配置nginx。

为什么history模式下有问题

Vue是属于单页应用（SPA）

而SPA是一种网络应用程序，所有与用户交互都是通过动态重写当前页面来实现页面变化的，前面我们也看到了，不管我们应用有多少页面，构建物都只会产出一个index.html

现在，我们回头来看一下我们的nginx配置：

server {
  listen  80;
  server_name  www.xxx.com;

  location / {
    index  /data/dist/index.html;
  }
}

可以根据 nginx 配置得出，当我们在地址栏输入 www.xxx.com 时，

这时会打开我们 dist 目录下的 index.html 文件，然后我们在跳转路由进入到 www.xxx.com/login，

关键在这里，当我们在 www.xxx.com/login 页执行刷新操作，nginx location 是没有相关/login配置的，所以就会出现 404 的情况。

因此需要重新配置nginx，将任意页面都重定向到 index.html

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论