Vue项目服务器部署刷新页面404问题及解决
作者:Tangctt 发布时间:2024-04-09 10:47:22
Vue服务器部署刷新页面404
问题描述
在上线vue开发的前端网页部署在服务器上后,刷新页面显示404
原因
因为网页上显示的是静态绝对路径
而实际上服务器上是没有改路径的,多以导致刷新汇报错误
解决方法
1. 在Vue框架中解决404
vue router mode 默认为hsas,这样的url中会带有#,如果改成mode:'history'就能去掉#号,也可以正常访问,但是再次率先你页面就会出现404
const router = new Router({
mode: 'history'
});
将url中的#去掉,让人很不爽
2. 修改nginx配置文件
将以下代码放入nginx中
location / {
……
try_files $uri $uri/ /index.html; ---解决页面刷新404问题
}
保存并退出
../nginx -t -- 验证nginx配置文件是否正确
../nginx -s reload -- 重启nginx
如果采用宝塔面板进行部署,则修改nginx相关配置即可
vue项目刷新界面出现404,正常点击跳转没问题
这个原因的本质是 history 和 hash 的区别
以 www.louhc.com/jichu/123 为例子(123为变量)
1. 直观上的区别是:
hash模式下,在浏览器地址栏里面会有: www.louhc.com/#/jichu/123 这种带 # 号的情况,视觉上不太美观。
history模式下,地址栏为:www.louhc.com/jichu/123 不会出现带#的情况 。
2. 致命区别
hash模式下,上线之后不会出现问题。
history 模式下,会出现一个致命的BUG,在服务器上面上线之后,点击页面跳转没有问题,但是一旦点击刷新页面会出现404错误,原因是history模式下刷新界面,就等同于向服务器直接请求:
www.louhc.com/jichu/123。但是在服务器后端的路径配置中压根就没有 /jichu/123 ,所以后端匹配不到相应的值,就会返回404错误,。有的朋友就会有疑虑,为什么在vue项目开发的时候不会出现这种问题呢?因为在vue项目开发的时候是访问自己的8080服务器,后端有进行处理,在刷新界面后找不到相对路径时,会重新渲染index.html界面,把路由的控制权交给前端,然后前端负责路由的匹配,在找到符合/jichu /123 这种格式的路由后,就会匹配成功。从而达到页面正常显示的情况.。
所以在线上遇到这种情况下,我们需要后端进行相应的配置处理,在匹配不到路径的情况下重新渲染index.html 文件。
以下是后端如何匹配的例子:
Apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
相反mod_rewrite,您也可以使用。FallbackResource
Nginx
location / {
try_files $uri $uri/ /index.html;
}
本机Node.js
const http = require('http')
const fs = require('fs')
const httpPort = 80
http.createServer((req, res) => {
fs.readFile('index.htm', 'utf-8', (err, content) => {
if (err) {
console.log('We cannot open "index.htm" file.')
}
res.writeHead(200, {
'Content-Type': 'text/html; charset=utf-8'
})
res.end(content)
})
}).listen(httpPort, () => {
console.log('Server listening on: http://localhost:%s', httpPort)
})
通过Node.js进行表达
对于Node.js / Express,请考虑使用connect-history-api-fallback中间件
Internet信息服务(IIS)
安装IIS UrlRewrite
使用以下web.config命令在网站的根目录中创建一个文件:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Handle History Mode and custom 404/500" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Caddy
rewrite {
regexp .*
to {path} /
}
Firebase托管
将此添加到您的firebase.json:
{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
警告
需要注意的是:您的服务器将不再报告404错误,因为所有未找到的路径现在都可以处理您的index.html文件。要解决此问题,您应该在Vue应用程序中实施一个包罗万象的路由以显示404页面:
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }
]
})
或者,如果您使用的是Node.js服务器,则可以通过使用服务器端的路由器来匹配输入URL来实现后备,如果没有路由匹配,则以404进行响应。查看Vue服务器端渲染文档以获取更多信息。
来源:https://blog.csdn.net/Tang__CT/article/details/124570408
猜你喜欢
- 目录前言1. 效果图2. 原理3. 源码3.1 Numpy实现傅里叶变换3.2 OpenCV实现傅里叶变换3.3 HPF or LPF?参考
- 1、Python 有两种类型可以表示字符序列bytes:实例包含的是 原始数据 ,即 8 位的无符号值(通常按照 ASCII 编码 标准来显
- 导语周末、假期来了,七夕也快到了,又到一年中最一票难求的时候了!那些假期想回家、过节异地恋的小可爱们,能准时抢到回家(约会对象)的城市票嘛?
- 本文实例讲述了Python反射的用法。分享给大家供大家参考,具体如下:在做程序开发中,我们常常会遇到这样的需求:需要执行对象里的某个方法,或
- 利用MySQLfs这个工具,我么可以在MySQL关系数据库中存储文件系统。MySQLfs将文件系统中文件的字节内容分解成数据库中的元组,而数
- 概述从前面的对Python基础知识方法介绍中,我们几乎是围绕Python内置方法进行探索实践,比如字符串、列表、字典等数据结构的内置方法,和
- 近期接手越来越多的东西,发布和运维的工作相当机械,加上频率还蛮高,导致时间浪费还是优点多。修复bug什么的,测试,提交版本库(2分钟),ss
- 一、关系数据库1.数据模型实体间的关系分为以下有三种:1*)一对一模型一对一(one-to-one)关系模型用二维表格表示数据及数据联系,是
- 1.pickle 写: 以写方式打开一个文件描述符,调用pickle.dump把对象写进去 &
- 前言图像颜色的反转,比较简单的思路就是使用255减去当前值,从而得到反转后的图像.原始图片: 1.灰度图像的颜色反转import cv2im
- 1 conda介绍conda是一个python的包管理器,用来管理、安装、更新python的包和相关的依赖。另外,conda可以为特定任务创
- 写了个简洁的隔行变色代码,支持三种动作变化颜色<!DOCTYPE html PUBLIC "-//W3C//DTD XHTM
- SQL1: --1、查看表空间的名称及大小 SELECT t.tablespace_name, round(SUM(bytes / (102
- 前面说到最近在写python的一些东西,然后和另外一位小伙伴定义了协议,然后昨天我有一部分东西没理解对,昨天上午我自己重写了一遍接收和发送的
- 前言本文讲解如何加载json文件或字符串为pandas数据框。pandas把json数据分成几种典型类型,希望对你实际数据应用开发有所启示。
- 这几天开始学tensorflow,先来做一下学习记录 一.神经网络解决问题步骤: 1.提取问题中实体的特征向量作为神经网络的输入。也就是说要
- 本文实例讲述了Python中逗号的三种作用。分享给大家供大家参考。具体分析如下:最近研究python 遇到个逗号的问题 一直没弄
- 经常有需要扫描目录,对文件做批量处理的需求,所以对目录处理这块做了下学习和总结。Python 中扫描目录有两种方法:os.listdir 和
- 本文为大家分享了mysql 8.0.12 解压版安装教程,供大家参考,具体内容如下1、首先在官网上下载mysql8.0.12的压缩包:下载地
- 前言python 中 if 的用法(if else, if not, elif)if语句实际上是:if True: …