问题解决方案
修改NGINX服务器配置即可
location / {
try_files $uri $uri/ /index.html;
}
配置解释
try_files
指令是Nginx服务器中用来处理请求的一服务器托管网种方法,它尝试按顺序检查指定的文件或目录是否存在,并返回第一个存在的文件或结果。在Vue.js项目或者其他单页应用(SPA)部署场景下,这个配置是非常常见的:
location / {
try_files $uri $uri/ /index.html;
}
这个配置的意思是:
-
$uri
:首先尝试匹配请求URI所指向的精确路径上的文件。 -
$uri/
:如果第一步没有找到匹配的文件,则尝试将请求当作一个目录处理,并查找该目录下的默认文件,通常是index.html
或其他自定义的默认文件名。 -
/index.html
:如果前两步都无法找到任何资源,则将请求重定向到根目录下的index.html
文件。
在Vue.js项目中,当用户访问一个路由如/my-route
时,服务器实际上并没有与之对应的物理文件。通过上述try_files
配置,无论用户访问哪个路由,只要该路由在前端路由表中存在,服务器都会返回应用程序的入口文件——index.html
。这样,前端路由管理器(Vue Router)就能根据当前URL解析并展示相应的组件内容,从而实现SPA的无刷新导航和404错误的避免。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
作者:小傅哥 博客:https://bugstack.cn 沉淀、分享、成长,让自己和他人都能有所收获! 大家好,我是技术UP主小傅哥。 还是在22年的时候,小傅哥做了一套基于 Netty 协议转换和通信的 API网关,分享给伙伴们学习使用,增加一些业务开发以…