前端配置的 404问题
2023-06-29 本文已影响0人
云高风轻
1. 前言
2. 场景
- vue项目在本地时运行正常，但部署到服务器中，刷新页面，出现了404错误
- 先定位问题，HTTP 404 错误意味着链接指向的资源不存在
- 但是呢问题在于为什么不存在？
- 且为什么只有
history模式下会出现这个问题？- 打包放到 node+express下面玩的时候或者通过uniApp打包成安卓 iOS 包的时候也注意不要用
history模式
用hash是模式正确的
3. Vue是属于单页应用（single-page application）
server {
listen 80;
server_name www.yzs.com;
location / {
index /data/dist/index.html;
}
}
- 可以根据 nginx 配置得出，当我们在地址栏输入
www.yzs.com时，这时会打开我们 dist 目录下的 index.html 文件，- 然后我们在
跳转路由进入到 www.yzs.com/login
- 关键在这里，当我们在 yzs.com/login 页执行刷新操作，
nginx location 是没有相关配置的，
所以就会出现 404 的情况
4. 为什么hash模式下没有问题
- router hash 模式我们都知道是用符号#表示的，
如 yzs.com/#/login, hash 的值为 #/login
hash虽然出现在 URL 中，但不会被包括在HTTP 请求中，对服务端完全没有影响，因此改变 hash 不会重新加载页面
- hash 模式下，仅 hash 符号之前的内容会被包含在请求中，
如 yzs.com/#/login 只有 yzs.com 会被包含在请求中 ，
因此对于服务端来说，即使没有配置location，也不会返回404错误
5. 解决方案
- 定位问题:产生问题的本质是因为我们的路由是通过JS来执行视图切换的,
当我们进入到子路由时刷新页面，web容器没有相对应的页面此时会出现404
- 所以我们只需要配置将任意页面都重定向到 index.html，把路由交由前端处理
也就是 部署的时候 不要忘记配置路由
- 对nginx配置文件.conf修改，添加try_files
uri/ /index.html;
对nginx配置文件.conf修改，添加try_files $uri $uri/ /index.html;
- 修改完配置文件后记得配置的更新
nginx -s reload
*注意 为了避免这种情况 前端配置 404 页面
{
path:"/notfound",
name:"NotFound",
component:()=>import("../views/NotFound.vue")
},
{
// vue-router 3x
// path:"*"
// vue-router 4x
path:"/:pathMatch(.*)/",
// redirect 重定向
// redirect:"/notfound"
redirect:{
name:"NotFound",
// path:"/notfound"
}
}
- 其他 服务器Apache、nodejs 配置也都差不离
- 对于
Apache服务器，可以使用.htaccess文件来配置路由重定向
- 其他原因导致的404
6. 静态资源路径问题
- 以上属于
路 由配置问题的范畴 还有其他原因也会导致 404
- 当部署 Vue 项目时，确保服务器正确地提供静态资源文件（如 JavaScript、CSS 和图片等）。如果路径配置不正确，浏览器无法正确加载这些静态资源，导致 404 错误
- 解决方案
- 检查部署后的静态资源路径是否与 Vue 项目中的路径一致。
- 可以尝试使用绝对路径或相对路径来引用静态资源，确保路径的正确性。
- 同时，检查服务器的静态资源配置，确保服务器能够正确提供这些资源。
7. 索引文件缺失
- vue 项目通常会有一个入口文件（如 index.html），用于加载 Vue 应用的 JavaScript 文件和其他静态资源。404 错误
- 如果部署后缺少这个索引文件，或者服务器没有正确配置以提供该文件，刷新页面时会导致 404 错误
- 解决方案
- 检查部署后的文件是否包含正确的入口文件，如 index.html。
- 确保服务器配置正确，可以通过服务器的默认文档（如 Apache 的 DirectoryIndex）或其他方式指定入口文件。
8. 缓存问题
- 有时浏览器可能会缓存旧版本的静态资源，而不是从服务器重新获取更新后的文件。
- 当部署新版本时，浏览器仍然使用旧版本的缓存文件，导致请求的资源无法找到
- 解决方案
- 在部署新版本后，可以使用一些方法来强制浏览器重新获取最新的静态资源。
- 例如，可以通过修改文件名、添加查询参数或使用版本号等方式，使浏览器认为这是一个新的资源，从而不使用缓存的旧版本
9. 还不行 呢? 咋知道是哪种呢?
- 查看服务器的日志文件呗
