Vue Router部署至服务器后无法正常工作的问题求助

问题原因 #

• Nginx未配置SPA路由 fallback：你的Vue Router采用createWebHistory()（HTML5 History模式），这种模式下所有前端路由请求都需要指向index.html，由Vue Router接管路由逻辑。但默认Nginx配置仅在访问根路径时返回index.html，缺少路由 fallback 规则会导致前端路由状态异常，表现为router-link点击无响应。
• Nginx配置语法错误：你提供的Nginx配置中，index index.html index.htm行末尾缺少分号，这会导致Nginx配置解析失败，隐性影响路由处理逻辑。

解决方案 #

1. 修复Nginx配置 #

创建自定义Nginx配置文件（比如项目根目录下的nginx.conf），添加路由 fallback 规则并修正语法错误：

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        # 所有请求转发到index.html，交由Vue Router处理
        try_files $uri $uri/ /index.html;
    }
}

2. 更新Dockerfile #

修改Dockerfile，将自定义Nginx配置复制到镜像中，替换默认配置：

FROM node:14 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine as production-stage
# 复制自定义Nginx配置覆盖默认配置
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

3. 重新构建并部署 #

执行以下命令重新构建镜像，然后更新Kubernetes部署：

# 构建镜像（替换为你的镜像名称）
docker build -t frontend-app:latest .
# 推送镜像到仓库（如果使用远程仓库）
docker push frontend-app:latest
# 重新部署到K8s
kubectl apply -f your-deployment.yaml

验证要点 #

部署完成后：

• 点击Home/View按钮，确认路由能正常切换
• 直接访问/view路径，确认页面能正常加载（不会出现404）

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