为React+Nginx应用配置路径前缀遇阻，求解决方案

1. 修正Vite构建配置（vite.config.ts） #

确保base参数设置正确，必须包含开头和结尾的斜杠，构建后静态资源路径会自动带上前缀：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: '/prefix/',
  build: {
    outDir: 'dist',
  },
});

本地执行npm run build后，可查看dist/index.html内的资源引用，确认是否已自动添加/prefix/前缀（如<script src="/prefix/assets/index.xxx.js"></script>）。

2. 调整Nginx配置（nginx.conf） #

核心问题通常出在Nginx的路由映射逻辑，需同时处理静态资源和单页应用路由fallback：

server {
  listen 80;
  server_name somedomain.com;

  root /usr/share/nginx/html;
  index index.html;

  # 优先匹配静态资源，避免被路由规则拦截
  location ^~ /prefix/assets/ {
    rewrite ^/prefix/(.*)$ /$1 break;
    try_files $uri $uri/ =404;
  }

  # 处理前端路由，所有/prefix/开头的非资源请求都返回index.html
  location /prefix/ {
    rewrite ^/prefix/(.*)$ /$1 break;
    try_files $uri $uri/ /index.html;
  }

  # 若有Node.js后端接口，需添加前缀代理（按需配置）
  location /prefix/api/ {
    rewrite ^/prefix/(.*)$ /$1 break;
    proxy_pass http://your-node-service:3000/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

• ^~ /prefix/assets/规则确保静态资源请求被正确映射到Nginx根目录下的assets文件夹，避免返回HTML导致MIME类型错误
• /prefix/规则处理单页应用路由跳转，保证刷新或直接访问子路由时不会出现404

3. 确认React路由配置（AppRouter.tsx） #

React Router的basename需设置为不带末尾斜杠的前缀：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function AppRouter() {
  return (
    <BrowserRouter basename="/prefix">
      <Routes>
        <Route path="/" element={<Home />} />
        {/* 其他路由无需额外添加prefix前缀 */}
      </Routes>
    </BrowserRouter>
  );
}

4. 验证Docker构建配置（Dockerfile） #

确保构建产物正确拷贝到Nginx根目录：

# 构建阶段
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 运行阶段
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

5. 验证步骤 #

1. 本地构建后检查dist/index.html的资源路径是否带前缀
2. 启动容器后访问http://localhost/prefix，查看控制台是否仍有MIME错误
3. 直接访问静态资源（如http://localhost/prefix/assets/index.xxx.css），确认返回的是资源文件而非HTML

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