解决vue项目nginx部署到非根目录下刷新空白的问题

当将vue项目部署到非根目录下时，刷新页面会出现空白的问题，这是因为vue-router默认使用HTML5 history模式，而浏览器刷新时会向后端发送请求，但后端没有对应的路由，导致页面显示空白。

解决方法如下：

1. 在nginx配置文件中添加以下配置，将所有非文件请求都转发到index.html：

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

2. 在vue-router中设置base路径为部署路径，例如：

const router = new VueRouter({
  mode: 'history',
  base: '/subdirectory/',
  routes: [...]
})

这样就解决了部署到非根目录下刷新空白的问题。需要注意的是，如果在vue项目中使用了绝对路径，也需要更新为相对路径，否则会导致资源加载失败。

相关问题

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

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

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

首先，需要修改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?spm=1055.2569.3001.10343)

在部署Vue项目至Nginx服务器的非根目录时，如何正确配置Nginx以及Vue项目相关设置，以避免页面刷新时出现404空白页面的问题？

部署Vue项目到Nginx服务器的非根目录并确保页面刷新不出现404问题，需要对Nginx的配置文件以及Vue项目的配置文件进行适当的修改。首先，要修改Nginx的配置文件，确保对特定的非根路径请求能够正确地代理到Vue项目的入口文件。例如，如果你的Vue项目部署在非根目录 `/myapp` 下，Nginx配置应包含一个location块，指定代理到Vue项目的服务端口：

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

    location /myapp/ {
        proxy_pass ***端口; # Vue项目运行的端口
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

其次，Vue项目的构建配置也需要调整，以确保路由在前端正确处理。在 `config/index.js` 文件中，设置 `assetsPublicPath` 为你的非根目录路径：

// config/index.js
module.exports = {
  ...
  assetsPublicPath: '/myapp/', // 设置静态资源前缀路径为非根目录
  ...
}

最后，更新路由配置以确保前端路由在任何情况下都能正确解析。在 `src/router/index.js` 中，需要使用 `base` 选项或者 `history` 模式来处理路由：

// src/router/index.js
const router = new VueRouter({
  mode: 'history', // 使用HTML5的history模式
  base: '/myapp/', // 设置基础路径
  ...
})

这样配置后，Vue项目就能正确地部署到非根目录，并且页面刷新时不会出现404空白问题。建议详细阅读相关文档和资料，以便更深入地理解配置的含义和作用。

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