如何配置Nginx实现Vue项目的非根目录部署？同时解决页面刷新导致的404空白问题。

在部署Vue项目到非根目录并希望通过Nginx进行代理时，经常会遇到刷新页面导致404错误的常见问题。这个问题通常与前端路由和后端配置的不一致性有关。为了解决这一问题，需要对Vue项目的配置文件进行相应的修改，并且在Nginx配置文件中进行特定设置。以下是详细步骤和代码示例：

参考资源链接：[解决vue项目nginx部署到非根目录下刷新空白的问题](https://wenku.csdn.net/doc/645350b8ea0840391e7797b3?spm=1055.2569.3001.10343)

1. 修改Vue项目配置：
打开项目的`config/index.js`文件，找到`build`对象中的`assetsPublicPath`属性。这个属性控制了打包生成的静态资源的访问路径。为了使Vue项目运行在非根目录，需要将其值修改为对应的子目录路径，例如`/your-subdirectory/`。

2. 修改Vue路由配置：
在`router/index.js`文件中，根据需要配置路由。如果要将Vue应用部署在非根目录下，确保所有的路由都在该子目录下，比如`/your-subdirectory/`。

3. 配置Nginx服务器：
编辑Nginx配置文件`nginx.conf`，在`server`块中添加一个`location`块，用于处理对Vue应用的请求。在这个`location`块中，使用`try_files`指令配合`$uri/`和`index.html`来处理前端路由。示例如下：

   location /your-subdirectory/ {
       try_files $uri $uri/ /your-subdirectory/index.html;
   }

这个配置会先尝试直接提供请求的文件或目录，如果失败，则尝试请求`your-subdirectory/index.html`，由前端路由处理实际的页面内容。

通过以上步骤，Vue项目就可以被部署在Nginx的非根目录下，同时页面刷新也不会导致404错误。建议深入阅读《解决vue项目nginx部署到非根目录下刷新空白的问题》这篇资料，以获得更全面的理解和操作指南。

参考资源链接：[解决vue项目nginx部署到非根目录下刷新空白的问题](https://wenku.csdn.net/doc/645350b8ea0840391e7797b3?spm=1055.2569.3001.10343)