Nginx部署Vue打包项目解决刷新404

Nginx部署Vue打包项目解决刷新404

问题描述

Vue项目打包部署后，可正常访问所有的界面。但当刷新时，资源请求失败，出现404错误。

原因分析

Vue项目打包部署后，刷新页面时，vue-router设置的路由地址被当作url请求地址，而这个路径不是真实存在的，所以出现404错误。Vue项目页面加载时，访问dist目录下的静态资源，并在JS中渲染实现。所以，vue-router设置的路由地址并不代表真实资源的地址，真实资源的地址都在dist目录的静态资源中。

解决方法

在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面一般为项目的依赖文件index.html。

针对Nginx服务端，增加如下配置，解决vue-router跳转问题。

server
{
    listen 80;
    #listen 443;

	#增加配置start
    #vue-router配置
    location / {
        try_files $uri $uri/ @router;
        index index.html;	#Vue项目依赖页面
    }
    location @router {
        rewrite ^.*$ /index.html last;
    }
    #增加配置end
}