在将Vue项目部署到Nginx服务器的非根目录下时，如何通过Nginx配置以及项目本身设置解决页面刷新导致的404空白问题？

在部署Vue项目至Nginx服务器的非根目录时，常见的问题是页面刷新会导致404空白页面。这个问题可以通过正确配置Nginx服务器和Vue项目的相关设置来解决。以下是一些具体的步骤和方法：

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

首先，需要修改Vue项目的配置文件。通常，这涉及到配置文件中的基础路径（base path）设置。你需要找到项目的配置文件，通常是config/index.js，在这里可以设置publicPath的值。如果你的项目需要部署在非根目录，比如/myapp，那么应该将publicPath设置为'/myapp/'。确保不要忘记末尾的斜杠。

// config/index.js
module.exports = {
    // ...
    publicPath: '/myapp/', // 设置项目的部署基础路径
    // ...
};

其次，对于Vue Router的配置，确保在创建路由实例时，base属性正确指向你的非根目录。例如，如果Vue项目部署在/myapp目录下，应该这样配置：

// router/index.js
export default new Router({
    mode: 'history',
    base: '/myapp/', // Vue Router的基路径设置
    // ...
});

最后，需要正确配置Nginx以支持历史模式的前端路由。Nginx配置文件通常位于/etc/nginx/sites-available/下的相应站点配置文件中，你需要添加一个location块，来处理对非根目录的请求，并重写到index.html，以允许Vue Router接管路由。以下是一个示例配置：

server {
    listen 80;
    server_***; # 或者你的IP地址

    location /myapp/ {
        root /path/to/your/vue/project; # Vue项目的根目录路径
        try_files $uri $uri/ /myapp/index.html;
    }
}

在这个配置中，try_files指令尝试按照$uri、$uri/的顺序进行查找，如果都找不到，则将请求重写到/myapp/index.html。这样Vue Router就可以接管路由，并正确渲染对应的组件。

通过上述配置，可以确保Vue项目即使部署在非根目录下，也能正常工作，页面刷新也不会导致404空白页面的问题。

在你尝试解决部署问题的过程中，可以参考这篇资料：《解决vue项目nginx部署到非根目录下刷新空白的问题》。它将为你提供一个详细的步骤指南，帮助你理解并应用上述概念到实际的项目部署中去。

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