vue项目直接访问index报404

最新推荐文章于 2025-03-14 20:45:00 发布

南昌彭于晏

最新推荐文章于 2025-03-14 20:45:00 发布

阅读量311

点赞数 4

文章标签： vue.js 前端 javascript nginx

本文链接：https://blog.youkuaiyun.com/Eddie_Xu/article/details/145512184

版权

项目登录后进入首页，自动跳转至/index页面，此时无异常。
在这里插入图片描述
但是如果从其它页面跳转至/index页面或直接访问时，nginx报404错误。

经查，是nginx需单独对vue项目进行配置，如下：

location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }

就是其中的 try_files $uri $uri/ /index.html;

解释：用于定义Nginx如何处理对服务器的请求。这条指令的作用是尝试按顺序访问指定的文件或目录，如果前面的文件或目录不存在，则请求会被重定向到后面的资源。
$uri：这是当前请求的URI（统一资源标识符）。Nginx会首先尝试直接根据这个URI去服务器上的文件系统中找到对应的文件。如果找到了，就直接返回这个文件的内容给客户端。
$u r i / ：如果第一个$ uri对应的文件不存在，Nginx会尝试将这个URI当作一个目录来处理，尝试访问这个目录下的默认文件（比如index.html或者index.php，这取决于配置文件中的index指令）。
/index.html：如果前面的两个尝试都失败了（即指定的文件或目录都不存在），Nginx会将请求重定向到服务器的根目录下的index.html文件。这通常用于单页面应用（SPA）中，确保无论用户访问哪个路径，都能加载到应用的入口页面，然后由前端路由来处理不同的路径。
这种配置方式非常适合于部署前端单页面应用（SPA），因为它可以确保所有路由请求最终都能被正确地引导到应用的入口页面，而不会因为404错误而中断。同时，它也能处理静态资源的请求，如果这些资源存在于服务器上对应的路径下。

保存配置文件后，重启nginx服务，再次访问/index，完成。