::: tip 前言
自己在部署Vue项目到服务器上后,遇到刷新页面出现404的问题(history模式),而路由如果使用hash模式,则不会出现问题,这篇文章主要整理一下出现问题的原因以及解决办法
:::
为什么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 的情况
为什么hash模式下没有问题 🎉
router hash 模式我们都知道是用符号#表示的
特点:
- hash 虽然出现在URL中,但不会被包括在HTTP 请求中,对服务端完全没有影响
- 所以改变hash不会重新向服务端发送请求,而改变hash,在hash模式中会被hashChange方法捕获,在Vue中会触发页面的修改
- hash模式下,只有hash符号之前的内容会被包含在请求中,所以即使没有配置location,也不会返回404错误
解决方案🎉
1. 路由使用hash模式
很显然,这样问题会直接解决,但是看着地址栏中的#号,还是不太舒服
2. 修改nginx配置文件
listen 80 default_server;
listen [::]:80 default_server;
server_name 175.24.527.47;// 服务器ip地址
index index.php index.html index.htm default.php default.htm default.html;
root /www/wwwroot/dist.com; // vue文件得目录
location / {
#访问前端页面
root /www/wwwroot/dist.com;#vue项目存放路径
index index.html; #hash模式只配置访问html就可以了
try_files $uri $uri/ /index.html;#history模式配置否则会出现vue的路由在nginx中刷新出现404
}
3.以宝塔面板举例
3.1 打开软件商店找到nginx
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AJqFf8dF-1651569064643)(/assets/img/nginx1.png)]
3.2 打开设置,查看nginx配置文件存放目录
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8riKwm3E-1651569064646)(/assets/img/nginx2.png)]
3.3 进入配置文件目录,打开要修改Vue项目的配置文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KCl4YZ3q-1651569064647)(/assets/img/nginx3.png)]
3.4 修改配置文件,添加配置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YvtSHxzi-1651569064647)(/assets/img/nginx4.png)]
3.5 完成之后,记得重载配置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oUdxeTMN-1651569064648)(/assets/img/nginx5.png)]
vtSHxzi-1651569064647)]
3.5 完成之后,记得重载配置
[外链图片转存中…(img-oUdxeTMN-1651569064648)]