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

  • 相关阅读:
    How a webpage is loaded and displayed
    Tree知识总结
    Install Cassandra Locally
    axios接口封装
    Jsonp解决跨域问题
    react使用swiper,解决添加点击事件首位图片点击失效,解决轮播按钮被覆盖问题
    vue 生产环境和测试环境的配置
    vue使用远程在线更新代码
    vue.js axios实现跨域http请求接口
    leetcode每日一题(2020-05-27):974. 和可被 K 整除的子数组
  • 原文地址:https://www.cnblogs.com/fu-yong/p/9975551.html
Copyright © 2011-2022 走看看