Django部署vue项目报错:Not Found The requested resource was not found on this server.

这个问题通常是由于前端路由和后端路由的冲突导致的。在Vue项目中,通常使用Vue Router来处理前端路由,而在Django中,也有自己的路由系统。当你刷新页面时,浏览器会直接向服务器请求当前URL对应的资源,而不是通过Vue Router来处理。

为了解决这个问题,你可以通过以下几种方法来处理:

方法一:使用HTML5 History 模式

Vue Router 默认使用的是 hash 模式,这种模式下 URL 中会有一个 # 符号,例如 200.com/#/server。这种模式下刷新页面不会导致问题,因为 # 后面的内容不会被发送到服务器。但是,如果你希望 URL 更美观,可以使用 HTML5 History 模式。

  1. 在 Vue Router 中启用 HTML5 History 模式:

    javascript 复制代码
    const router = new VueRouter({
      mode: 'history',
      routes: [
        // your routes
      ]
    });
  2. 在 Django 中配置路由,使其能够处理所有前端路由请求并返回 index.html:

    python 复制代码
    from django.urls import path
    from django.views.generic import TemplateView
    
    urlpatterns = [
        path('', TemplateView.as_view(template_name='index.html')),
        path('<path:path>', TemplateView.as_view(template_name='index.html')),
    ]

方法二:使用中间件处理前端路由

你也可以创建一个 Django 中间件来处理所有前端路由请求,并返回 index.html。

  1. 创建一个中间件文件 frontend_middleware.py:

    python 复制代码
    from django.http import HttpResponse
    from django.template import loader
    
    class FrontendMiddleware:
        def __init__(self, get_response):
            self.get_response = get_response
    
        def __call__(self, request):
            if request.path.startswith('/api'):
                return self.get_response(request)
    
            template = loader.get_template('index.html')
            return HttpResponse(template.render({}, request))
  2. 在 Django 设置中添加中间件:

    python 复制代码
    MIDDLEWARE = [
        # other middleware classes
        'your_app.frontend_middleware.FrontendMiddleware',
    ]

方法三:使用 Nginx 或其他 Web 服务器进行重写

如果你使用 Nginx 或其他 Web 服务器来部署你的 Django 应用,你可以在服务器配置中进行 URL 重写,将所有前端路由请求重写到 index.html。

  1. 在 Nginx 配置文件中添加以下内容:

    nginx 复制代码
    location / {
        try_files $uri $uri/ /index.html;
    }

通过以上方法,你可以确保在刷新页面时,前端路由能够正确处理,而不是直接请求 Django 后端接口,从而避免页面报错。

在本次问题中,我们使用了方法一解决了问题!

相关推荐
belldeep3 小时前
python:genesis-world, Genesis-Embodied-AI
人工智能·python·ai·genesis
benchmark_cc4 小时前
A 股、港股、美股如何建立统一的标的主数据格式?
开发语言·python·数据分析·pandas·量化交易·股票数据·quantdash
维克兜率天5 小时前
【维克】趋势型CTA:期货市场的“追涨杀跌“
人工智能·python
取名真是6 小时前
Python 算法知识点从基础到进阶
开发语言·python·算法
梦想不只是梦与想6 小时前
PyTorch、CPU、GPU、CUDA
人工智能·pytorch·python·深度学习·机器学习·cuda
数字融合6 小时前
透明化视频孪生危化安全管控解决方案
人工智能·python·安全
FRing036 小时前
vue2干货总结3(computed计算属性、watch监听器)
开发语言·前端·vue.js·vue2
Java小卷7 小时前
JuanForm vs FormCreate!Vue3 表单引擎联动配置 PK!
vue.js·低代码
别问!问就是全会7 小时前
Jupyter Notebook 安装包下载|单元格分块运行,图表直接内嵌
ide·python·其他·jupyter
深蓝AI8 小时前
Python 缓存击穿实测:16 个并发请求如何只回源 1 次
python