Vue生产环境（Docker本地部署）刷新/提交表单404问题求助

1. 让Django接管前端路由回退 #

Vue的history模式下，刷新或直接访问子路径（如/dashboard/users/1）时，请求会直接发送到Django后端。由于Django没有对应URL路由，就会返回404。需要在Django主路由中添加通配规则，把所有前端路由请求转发到Vue的index.html：

在Django项目的urls.py中添加：

from django.views.generic import TemplateView
from django.urls import re_path

urlpatterns = [
    # 你的API路由和其他Django路由
    path('admin/', admin.site.urls),
    path('api/', include('your_api_app.urls')),
    # 前端路由回退规则，放在最后
    path('', TemplateView.as_view(template_name='index.html')),
    # 匹配所有未被上面路由处理的路径
    re_path(r'^.*$', TemplateView.as_view(template_name='index.html')),
]

注意：要确保Vue构建后的index.html被放置在Django的templates目录下，或者在settings.py中配置TEMPLATES的DIRS指向Vue构建后的dist目录。

2. 正确配置Vue构建与Django静态文件 #

• 执行npm run build构建Vue项目，生成dist目录。
• 在Django的settings.py中配置静态文件路径，指向Vue构建后的静态资源：

import os

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'vue/dist/static'),  # 替换为你的dist/static实际路径
]
# 生产环境建议执行collectstatic，把静态文件统一收集到STATIC_ROOT
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

3. Docker容器的两种配置方案 #

方案A：Django直接托管Vue静态文件 #

• 在Dockerfile中，将Vue构建后的dist目录复制到Django项目的对应位置（比如templates和static相关目录）。
• 启动容器时，先执行python manage.py collectstatic --noinput收集静态文件，再启动Django服务。

方案B：使用Nginx反向代理（更推荐） #

如果用Nginx作为前端静态文件服务器和反向代理，配置Nginx的nginx.conf：

server {
    listen 80;
    server_name localhost;

    # 托管Vue静态文件
    location /static/ {
        root /usr/share/nginx/html;
    }

    # 处理前端路由，所有非API请求转发到index.html
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    # 转发API请求到Django容器
    location /api/ {
        proxy_pass http://django:8000;  # django是Docker Compose中Django服务的名称
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

然后在Docker Compose中配置Nginx和Django服务，挂载Vue的dist目录到Nginx容器的/usr/share/nginx/html路径。

4. 验证Vue的BASE_URL配置 #

确保Vue项目的process.env.BASE_URL在Docker环境下正确设置：

• 如果Vue部署在根路径，.env.production中设置VUE_APP_BASE_URL=/
• 对应router中的createWebHistory(process.env.BASE_URL)即可正常工作

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