前端(以Vue为例)webpack打包后dist文件包如何部署到django后台中
由于现在前端使用的三大框架配合webpack可以实现快速打包,为部署到服务端提供了非常大的便利,那么在前端打包后,应该做些什么可以部署到django的后台中呢?
1.打包后文件包dist
进入到 dist文件包会发现是这个样子的:
2.在django项目中创建前端文件包(静态资源包,我习惯起名为frontend)
然后把dist文件包中的static文件包和index.html拷贝过去,接着把static文件包中的所有文件都剪切到上一层目录,由于我们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"] = Truereturn 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端口就可以加载到前端的路由了
前端(以Vue为例)webpack打包后dist文件包如何部署到django后台中相关推荐
- vue 不生效 打包 样式_解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
- html文件很大,webpack打包之后的文件过大如何解决
本文主要和大家介绍了webpack打包之后的文件过大的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 以前一直使用 create-react- ...
- 把Java程序打包成jar文件包并执行
把Java程序打包成jar文件包并执行 1.首先要确认自己写的程序有没有报错. 2.第一次我写的是Web Project到现在,我一直没有执行成功,所以最好创建的是java Project 打包步骤: ...
- java 程序包jar_把Java程序打包成jar文件包并执行
把Java程序打包成jar文件包并执行 1.首先要确认自己写的程序有没有报错. 2.第一次我写的是Web Project到现在,我一直没有执行成功,所以最好创建的是java Project 打包步骤: ...
- java代码执行 打包jar_Java程序打包成jar文件包并执行的方法
这篇文章主要介绍了把Java程序打包成jar文件包并执行的方法,非常具有实用价值,需要的朋友可以参考下 本文介绍了把Java程序打包成jar文件包并执行的方法,分享给大家,具体如下: 1.首先要确认自 ...
- java打包成jar_把Java程序打包成jar文件包并执行的方法
本文介绍了把Java程序打包成jar文件包并执行的方法,分享给大家,具体如下: 1.首先要确认自己写的程序有没有报错. 2.第一次我写的是Web Project到现在,我一直没有执行成功,所以最好创建 ...
- java 程序打包成jar_把Java程序打包成jar文件包并执行的方法
本文介绍了把Java程序打包成jar文件包并执行的方法,分享给大家,具体如下: 1.首先要确认自己写的程序有没有报错. 2.第一次我写的是Web Project到现在,我一直没有执行成功,所以最好创建 ...
- vue项目使用webpack打包后,图片不显示
1.问题及解决原因 vue项目打包后放到服务器上,配置好后,发现页面可以正常访问,访问后端接口也没有问题,但是网页登录界面的背景图片显示不出来. 查看控制台也没有报错. 错误原因是Webpack打包之 ...
- 在vue项目中webpack打包后字体不生效
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
最新文章
- python结束循环_python中break、continue 、exit() 、pass终止循环的区别
- PTA团体程序设计天梯赛篇(四)----几何+算法专题
- 如何用命令行刷新,启用,禁用Magento2的缓存
- 写代码爬取了某 Hub 资源,只为撸这个鉴黄平台!
- ASP.NET学习5--N层代码示例
- 致电以验证您的JavaFX UI的响应能力
- spring学习(35):c名称空间注入
- Android异步处理:Handler+Looper+MessageQueue深入详解
- kubernetes视频教程笔记 (9)-资源清单yaml是什么 yaml的格式语法
- Spring中的@DependsOn注解
- 大数据、物联网技术、物联网卡,对我们生活带来的影响
- ClickHouse用户路径分析之桑基图
- BLE芯片PHY6222---两路PWM互补输出
- 异常(父类对象ani instanceof是不是 子类Cat 的实例)
- Node.js中的egg入门、egg路由、egg控制器、egg服务、egg中间件
- Python多线程下调用win32com包相关问题:pywintypes.com_error: (-2147221008, ‘尚未调用 CoInitialize。‘, None, None)问题处理
- Chrome OS与Windows
- 网络聊天室——掌赢在线笔试
- 自主专利 养护式洗车 净车侠以创新开启财富盛宴
- 编译原理之 短语直接短语句柄 定义与区分
热门文章
- Android调用系统相机拍照
- 障碍期权定价 python_Python王牌加速库2:深度学习下的障碍期权定价
- python黑色背景rbg_PIL图像转换为RGB,保存为纯黑色图像(python)
- linux的swap与memory,【Linux】Linux中Swap与Memory内存简单介绍
- Creo AFX钢结构设计视频教程
- python 迷宫边界_用Python绘制迷宫般的线条?
- html5游戏需求文档,游戏PRD丨狼人杀APP产品需求文档
- 变分推断 python_变分推断(Variational Inference)
- 不用代码!手把手教你Excel构建数据分析预测模型!
- 把C盘正好分成100G的数值