VUE+Django项目编写

描述：将vue与Django进行结合进行项目编写，在开始之前需要已经掌握VUE与Django基础知识。并且已经编写好准备结合的VUE与Django内容，文章只介绍结合部分。

1. 修改VUE的vue.config.js文件，添加打包目录static（Vue clie 3.0打包时是没有static文件夹的，但是Django目前进行配置静态资源时，该文件夹为必须的）

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,// 设置打包文件中有static目录assetsDir: 'static',
})

2. 切换到VUE项目下进行项目打包处理

npm run build

3. 打包好的项目目录如下，将打包好的文件夹放到Django相关目录下（可以找到对应的路径即可）

4. 修改Django项目中的settings文件，添加dist的路径信息

该文件夹下的默认路径是你的项目路径，如果你拷贝到了项目下，可以直接填写文件夹名称，我这里因为是在项目文件夹外面所以需要用 …/ 返回到上级目录再去找对应的dist文件夹

TEMPLATES = [{'BACKEND': 'django.template.backends.django.DjangoTemplates','DIRS': ['你的项目路径'],'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',],},},
]STATICFILES_DIRS = [os.path.join(BASE_DIR, "你的项目路径")
]

5. 修改urls.py文件，配置index.html文件信息

这样配置是为了将Django的TemplateView指向到我们的vue项目的index.html文件

from django.conf.urls import url
from django.contrib import admin
from django.urls import path
from django.views.generic.base import TemplateViewurlpatterns = [url(r'^admin/', admin.site.urls),path('', TemplateView.as_view(template_name='index.html')),
]

6. 配置完成后我们就可以将Django运行起来了

在Django项目目录下运行

python manage.py runserver

7. 运行后我们可以通过访问 http://127.0.0.1:8000/ 来查看，此时页面就是我们的VUE项目页面了

参考文档
1.vue cil 3.0打包后没有static文件夹，Django无法访问
2.VUE项目与Django项目结合

VUE+Django项目编写相关推荐

vue 插入word模板项目_10 分钟为你的 vue 项目编写代码文档
代码文档是软件开发使用和维护的必备资料,有了文档,开发和维护以及协作的效率将变得大大提升.tips:如果对 JSDoc 已经熟悉,可以直接跳到实战演练环节. 什么是文档?软件文档或者源代码文档是指与软 ...
vue+django前后端项目部署
一.python3的安装 1.安装python前的库环境: yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel ...
Vue+Django REST framework打造生鲜电商项目
1-1 课程导学 2-1 Pycharm的安装和简单使用 2-2 MySQL和Navicat的安装和使用 2-3 Windows和Linux下安装Python2和Python3 2-4 虚拟环境的安装 ...
视频教程-Python+Vue+Django前后端分离项目实战-Python
Python+Vue+Django前后端分离项目实战教学风格独特,以学员视角出发设计课程,难易适度,重点突出,架构清晰,将实战经验融合到教学中.讲授技术同时传递方法.得到广大学员的高度认可. 王进 ...
python全栈生鲜电商_Python前后端分离开发Vue+Django REST framework全栈打造生鲜电商项目...
vue项目采用当前流行的前后端分离式开发技术,涉及RESTFul API基础知识和Vue项目结构分析,解决了技术开发单一的痛点,拥有超前的技术融合技能,让你在开发的领域比别人技高一筹! 1.项目初始化 ...
前端Vue+后端Django项目创建以及自动部署流程
所有的环境都安装完了之后,接下来就要创建项目了,完整的项目开发流程是由开发的同学先写完代码,然后交付给运维的同学部署到测试和生产环境.DevOps可以让整个流程自动化,开发的同学只需要稍微会一些工具就 ...
不属于前后端分离的Vue+Django的例子
[1]就不属于前后端分离 [1]的前端代码是在这个django项目里面的前后端分离,应该是一个项目写后端接口,一个项目写前端页面也就是说,包含下面内容的肯定不是前后端分离: 方法一:在urls中编 ...
Django项目 | 使用MongoDB存储图片
最近要做一个使用mongodb做数据库的django项目,需要利用其存储图片.在django中使用mongoengine作为调用mongodb数据库的方法.探索了一下如何存放图片,记录在这里,但是肯定 ...
Django项目：前后端联调/ModelViewSet
1.创建项目pycharm文件/cmd命令:django-admin startproject +项目名 2.创建子应用/命令:python manage.py startapp +子应用名 3.项目 ...
Vue + Django + PaddleOCR 实现一个在线OCR 识别网站，一键上传快速识别
大家好,我是小张~ 之前写过一篇博文介绍了一款OCR 识别库,识别精度能达到商用级别,并且支持多语言识别,使用详情请参考文章:文本OCR,这个Python库识别效果不输于商用!, 除了PaddleOC ...

VUE+Django项目编写

VUE+Django项目编写

1. 修改VUE的vue.config.js文件，添加打包目录static（Vue clie 3.0打包时是没有static文件夹的，但是Django目前进行配置静态资源时，该文件夹为必须的）

2. 切换到VUE项目下进行项目打包处理

3. 打包好的项目目录如下，将打包好的文件夹放到Django相关目录下（可以找到对应的路径即可）

4. 修改Django项目中的settings文件，添加dist的路径信息

5. 修改urls.py文件，配置index.html文件信息

6. 配置完成后我们就可以将Django运行起来了

7. 运行后我们可以通过访问 http://127.0.0.1:8000/ 来查看，此时页面就是我们的VUE项目页面了

VUE+Django项目编写相关推荐

最新文章

热门文章