Vue（CLI3）部署Nginx后深度链接刷新资源返回index.html问题求助

我之前也碰到过一模一样的问题，核心是资源路径配置和Nginx路由规则的配合出了问题，咱们一步步来搞定：

第一步：修正Vue项目的资源根路径配置 #

问题的关键之一是你的Vue项目构建后，资源文件（js、css等）的引用路径是相对路径，导致直接访问/dashboard时，浏览器会尝试从/dashboard/js/这类路径加载资源，但实际资源都存在服务器根目录的/js/下，自然找不到。

你需要在Vue项目根目录创建或修改vue.config.js，设置publicPath为绝对根路径：

module.exports = {
  publicPath: '/' // 强制资源从服务器根目录加载
}

修改后重新执行npm run build，生成新的dist目录再上传到服务器。此时你可以打开dist/index.html检查，所有js、css的引用应该都是以/开头的（比如<script src="/js/app.xxxx.js"></script>），而不是相对路径。

第二步：配置正确的Nginx规则 #

接下来调整Nginx的配置，要确保静态资源优先被正确返回，只有非静态资源的路由请求才fallback到index.html（让Vue Router处理前端路由）。

打开你的Nginx站点配置文件（通常在/etc/nginx/sites-available/或/etc/nginx/conf.d/下），修改server块如下：

server {
    listen 80;
    server_name your-domain.com; # 替换成你的域名或服务器IP

    # 指向Vue项目构建后的dist目录
    root /var/www/your-vue-project/dist;
    index index.html;

    # 先处理静态资源：匹配所有js、css、图片等静态文件，找不到直接返回404
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf)$ {
        expires 1y; # 给静态资源设置长期缓存
        add_header Cache-Control "public, immutable";
        try_files $uri =404;
    }

    # 处理SPA前端路由：所有非静态资源的请求都返回index.html
    location / {
        try_files $uri $uri/ /index.html;
    }
}

第三步：验证并重启Nginx #

配置完成后，先检查Nginx配置是否合法：

sudo nginx -t

如果提示test is successful，就重启Nginx让配置生效：

sudo nginx -s reload

现在再试试直接访问/dashboard或者刷新页面，应该就能正常加载资源了。

额外排查点 #

如果还是有问题，可以检查：

• 服务器上的dist目录权限是否正确，确保Nginx进程有读取权限（可以执行sudo chmod -R 755 /var/www/your-vue-project/dist）
• 确认Nginx的root路径确实指向了dist目录的正确位置

内容的提问来源于stack exchange，提问作者devman