(开发环境)整合：vue前端项目 和 django后端项目

背景

使用Vuejs作为前端框架代替Django本身较为孱弱的模板引擎，Django则作为服务端提供api接口。
这样，开发时前后端项目可实现完全分离。而待前后端开发完成后，开发者可以选择分开部署前后端项目，也可以选择合并前后端项目再进行部署。

👇👇👇下面，我就来重点讲讲“如何合并前后端项目？？？”👇👇👇

项目结构—前后端项目合并

图片.png

如上图，可在django项目（customer-position）里放置vue前端项目（customer-position-frontend）。
其中，dist是当运行 vue-cli-service build 时生成的生产环境构建文件的目录，static则是放置生成的静态资源 (js、css、img、fonts) 的目录。

整合步骤

前提：开发环境下Django项目的DEBUG配置项必须为True

• 当debug=True时，django便会自动帮我们对静态文件进行路由；
• 当debug=Flase后，'django.contrib.staticfiles’会关闭，即Django不会自动搜索静态文件。

主要问题：（需保证静态资源的路径正确！）

• vue项目打包构建后生成的index.html，其内的CSS/JS等资源路径需是相对路径
• django项目需能正确找到index.html和对应的静态资源

1. vue项目配置静态资源存放目录名为“static”

图片.png

2. vue项目重新打包构建

npm run build

3. django项目：使用通用视图TemplateView修改静态指向路径

图片.png

4. django项目: 修改静态资源文件路径

图片.png

5. django项目: 启动django项目

python manage.py runserver 0.0.0.0:8000

6. 浏览器访问localhost:8000，可正常访问

图片.png