Nginx服务器通过地址访问页面出现404错误

出现问题

在将Vue项目部署到服务器后发现在访问页面的时候只能访问默认页面和通过项目内跳转其他页面，如果直接通过地址访问就会出现404 Not Found而在本地Vue项目运行时直接通过地址访问并没有出错，说明问题不在Route而是在Nginx服务器的设置中

解决方案

在原本的Nginx配置中，设置的内容如下：

location / {
	root   /usr/share/nginx/html;
	index   dist/index.html;
}

直接理解就是当访问根地址/时，跳转到dist文件夹下的index.html文件，而其他页面在访问时nginx会找不到对应的文件，所以显示找不到，将配置修改成如下即可：

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

其中的try_files是Nginx的一个指令，用于指定一个文件的查找顺序，并且在文件不存在时执行相应的操作。通过添加这个try_files指令，可以告诉Nginx首先尝试查找请求的URI对应的文件（$uri），如果找到了，就直接返回该文件。如果没有找到，Nginx会尝试查找与请求的URI对应的目录（$uri/），如果找到了目录，则尝试寻找该目录下的默认文件（通常是index.html或者其他指定的默认文件）。如果前两步都没有找到相应的文件或目录，Nginx会将请求重定向到/dist/index.html。

因为采用Vue开发单页应用程序（SPA）时，只会生成一个index.html文件作为整个单页应用程序的入口，所以直接访问URL时会出现404错误，因为实际上这些路径是由前端路由处理的。通过将所有这些路径都重定向到单页应用程序的入口文件（例如index.html），程序才可以正确地处理这些路由并渲染相应的页面内容。

补充内容

vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果不想使用hash这种以#号结尾的路径的话，就可以使用路由的history的模式。比如如下网址：使用hash模式的话，那么访问的地址就是 http://localhost:8080/test/#/ ，而如果路由使用 history的话，那么访问的路径变成就变成了 http://localhost:8080/test

不过history的这种模式需要后台配置支持。比如当访问项目的主页的时候，一切正常，可以访问，但是当我们刷新页面或者直接访问路径的时候就会返回404，那是因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，而当直接在浏览器里输入这个地址来访问的时候，就需要对服务器发起http请求来获取该地址对应的网页内容，但是这个目标在服务器上又不存在，所以会返回404