AKS上Vue+NGINX部署后部分页面出现无限加载问题排查

我在AKS上部署了Vue-CLI前端项目，用npm run serve以开发模式运行时一切正常，所有请求都能处理。但用npm run build构建生产版本，通过NGINX托管dist文件夹后，像https://example.com/details/view-users、https://example.com/details/return这类子路径页面会出现无限加载，还无法返回上一页面。

现有Dockerfile配置 #

# Use Ubuntu 20.04 LTS as the base image
FROM ubuntu:20.04

# Set the working directory
WORKDIR /app

# Update the package list and install necessary packages
RUN apt-get update && \
    apt-get install -y nginx && \
    apt-get install -y curl gnupg2 && \
    curl -sL https://deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -y nodejs && \
    npm install -g vue-cli

# Copy the Vue.js app files to the container
COPY . /app

# Build the Vue.js app for production
RUN npm install && \
    npm run build

# Copy the Nginx configuration file to the container
COPY nginx.conf /etc/nginx/nginx.conf

# Expose port 80 for incoming web traffic
EXPOSE 8080

# Start Nginx and keep the container running
CMD ["nginx", "-g", "daemon off;"]

现有nginx.conf配置 #

events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  server {
    listen       8080;
    server_name  example.com;
    error_log stderr;
    access_log /dev/stdout;
    location / {
      root   /app/dist;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
  }
}

这是Vue单页应用（SPA）的典型路由+生产构建配置问题：

1. 前端路由与服务器映射不匹配：Vue使用history模式路由时，子路径是前端虚拟路由，服务器上不存在对应物理文件。虽然配置了try_files，但Docker构建和NGINX路径的配合问题导致规则未生效。
2. Docker构建冗余与路径混淆：基于Ubuntu安装全套Node.js和Vue-CLI属于冗余操作，且容器内/app目录包含大量非生产文件，可能导致静态资源加载路径错误。
3. 静态资源加载失败：若构建时未正确设置publicPath，JS/CSS等资源会从子路径加载，导致404，页面无法完成初始化，出现无限加载。

1. 优化Dockerfile（多阶段构建，精简镜像） #

只保留生产必需的dist文件夹和NGINX，避免冗余依赖，同时明确设置构建的publicPath：

# 构建阶段：仅用于生成dist产物
FROM node:14-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# 明确设置publicPath为根路径（若部署在子目录需对应修改）
RUN npm run build -- --publicPath=/

# 生产阶段：仅保留NGINX和dist文件
FROM nginx:alpine
# 复制构建好的dist到NGINX默认静态目录
COPY --from=builder /app/dist /usr/share/nginx/html
# 复制自定义NGINX配置
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

2. 修正NGINX配置（确保路由与静态资源加载正常） #

调整配置，明确根路径，强化静态资源缓存规则：

events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;

  server {
    listen       8080;
    server_name  example.com;
    error_log stderr;
    access_log /dev/stdout;

    # 根路径指向NGINX托管的dist目录
    root /usr/share/nginx/html;
    index index.html;

    # 核心规则：优先找物理文件，找不到返回index.html交由Vue路由处理
    location / {
      try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存优化，避免重复请求
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
      expires 1y;
      add_header Cache-Control "public, immutable";
    }
  }
}

3. 确认Vue路由配置 #

确保使用history模式，且base路径与部署环境匹配：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  // 若部署在域名根目录，BASE_URL为/；子目录则对应设置，比如/sub-app/
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    // 你的路由配置项
  ]
})

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