zoukankan      html  css  js  c++  java
  • 前端(以Vue为例)webpack打包后dist文件包如何部署到django后台中

         由于现在前端使用的三大框架配合webpack可以实现快速打包,为部署到服务端提供了非常大的便利,那么在前端打包后,应该做些什么可以部署到django的后台中呢?

    1.打包后文件包dist


    进入到 dist文件包会发现是这个样子的:

    2.在django项目中创建前端文件包(静态资源包,我习惯起名为frontend) 
           然后把dist文件包中的static文件包和index.html拷贝过去,接着把static文件包中的所有文件和index文件都剪切到上一层目录(都在frontend中),由于我们Vue构建的是单页应用所以一般只有一个html。做完这些后吧static这个空文件包删掉就行了。这样就形成了django后台的静态文件包。

    3.在settings中配置静态文件以及模板
              这里的index.html就相当于是template中的html文件,为了方便就把静态资源和这个模板文件整合在一个文件包中。

              首先是template配置:

    TEMPLATES = [
    {
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [os.path.join(BASE_DIR,'frontend')],
    'APP_DIRS': True,
    'OPTIONS': {
    'context_processors': [
    'django.template.context_processors.debug',
    'django.template.context_processors.request',
    'django.contrib.auth.context_processors.auth',
    'django.contrib.messages.context_processors.messages',
    ],
    },
    },
    ]
           然后是静态文件配置: 

    STATIC_URL = '/static/'
    STATIC_ROOT = os.path.join(BASE_DIR, 'static')
    STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend"),
    ]
    4.创建一个app,并且在views中写一个index路由函数,并且在url中配置首页
    #加载静态界面index首页
    def index(request):
    request.META["CSRF_COOKIE_USED"] = True
    return render(request,'index.html')
    request.META["CSRF_COOKIE_USED"] = True这句可以对vue单页应用进行csrf_token设置,方便进行csrf防御

    urlpatterns = [
    url(r'^baseapi/', include("baseapp.urls")),
    url(r'^.*?$',views.index,name="index"),
    ]
     url(r'^.*?$',views.index,name="index")设置后,启动django,访问8000端口就可以加载到前端的路由了

    或者,直接在url中加入:

    from django.views.generic import TemplateView
    path('', TemplateView.as_view(template_name='index.html'), name='index'),

    ---------------------
    原文:https://blog.csdn.net/qq_41000891/article/details/82961680

  • 相关阅读:
    UOJ.26.[IOI2014]Game(交互 思路)
    Good Bye 2016 F.New Year and Finding Roots(交互)
    Codeforces.835E.The penguin's game(交互 按位统计 二分)
    Codeforces.744B.Hongcow's Game(交互 按位统计)
    Codeforces.862D.Mahmoud and Ehab and the binary string(交互 二分)
    正睿OI 提高 Day1T3 ZYB玩字符串(DP)
    划分vlan
    2三层交换机实现vlan间的路由
    交换机基础-交换机远程telnet
    自动化运维环境的搭建问题处理
  • 原文地址:https://www.cnblogs.com/fu-yong/p/9975551.html
Copyright © 2011-2022 走看看