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

下面是解决 Vue 项目在 Nginx 部署非根目录下刷新空白的问题的完整攻略。

问题描述

当 Vue 项目部署在 Nginx 上，并且不是在根目录下，比如在 http://example.com/vueapp 目录下时，直接访问路由会导致刷新后页面空白，浏览器控制台提示 404 错误。

原因分析

这是因为 Vue 项目使用的是前端路由，刷新页面时浏览器会向服务器发送请求，并带上当前路径，Nginx 服务器不知道这个路径，会返回 404 错误。

解决步骤

1. 修改 vue.config.js 配置

在 Vue 项目根目录下的 vue.config.js 文件中，加入以下代码：

module.exports = {
  publicPath: '/vueapp/',
  outputDir: 'dist',
};

其中，publicPath 表示打包后 index.html 引入静态资源的路径，即上面的 http://example.com/vueapp。outputDir 表示打包后静态资源的输出目录，这里设为 dist。

2. 修改 Nginx 配置

在 Nginx 服务器的配置中，根据情况添加以下配置：

location /vueapp/ {
    alias /path/to/vueapp/dist/;

    try_files $uri $uri/ /vueapp/index.html;
}

其中，/path/to/vueapp/ 修改为 Vue 项目打包后静态资源的路径。try_files 配置了请求文件的优先级，首先尝试请求对应的文件，如果没有再请求 /vueapp/index.html。

注意：如果 Nginx 配置中已经有了根路径的配置（location / {}），需要将其放在 /vueapp/ 的配置前，否则会覆盖掉 /vueapp/ 的配置。

3. 重新部署 Vue 项目和 Nginx

修改完配置后，需要重新打包并部署 Vue 项目和重启 Nginx 生效。

示例

假设 Vue 项目打包后的静态资源路径为 /var/www/vueapp/dist/，Nginx 的根路径为 /var/www/，Nginx 的域名为 example.com。

• 修改 vue.config.js：

module.exports = {
  publicPath: '/vueapp/',
  outputDir: 'dist',
};

• 修改 Nginx 配置：

location /vueapp/ {
    alias /var/www/vueapp/dist/;

    try_files $uri $uri/ /vueapp/index.html;
}

• 重新部署 Vue 项目和 Nginx 生效。控制台打印没有错误信息，页面能够正常访问。

总结

综上，解决 Vue 项目在 Nginx 部署非根目录下刷新空白的问题的完整攻略如下：

1. 修改 vue.config.js 配置：

module.exports = {
  publicPath: '/vueapp/',
  outputDir: 'dist',
};

1. 修改 Nginx 配置：

location /vueapp/ {
    alias /path/to/vueapp/dist/;

    try_files $uri $uri/ /vueapp/index.html;
}

1. 重新部署 Vue 项目和 Nginx 生效。