vue3知识点9 vue项目打包到django的项目部署

luanmabug

已于 2022-02-13 16:57:31 修改

阅读量3.5k

点赞数 2

分类专栏： vue基础文章标签： django 前端 vue项目打包 vue+django前后端交互

于 2022-01-26 21:24:15 首次发布

本文链接：https://blog.csdn.net/yangyangdt/article/details/122708957

版权

本文介绍了如何将vue3项目使用vuecli4.5打包，并部署到django环境中。主要步骤包括vue项目的打包配置和django项目的设置，如dist文件复制、settings.py与urls配置。在部署过程中可能遇到403和404错误，解决方案包括处理CSRF cookie和修正图片路径问题。

摘要由CSDN通过智能技术生成

vue3知识点9 vue项目打包到django的项目部署

一、vue项目打包

vuecli4.5项目打包配置

二、django配置

1.打开vue项目后台数据的django项目。

如何创建一个django项目并运行

2.将打包好的vue项目中新生成的dist文件复制到django项目目录下(与app同级).

3.在与项目同名的目录下打开settings.py,配置如下：

STATIC_URL = '/static/' #在settings文件最后一行。

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
    os.path.join(BASE_DIR, "dist/static"),

]

TEMPLATES

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

luanmabug

关注关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
vue3知识点9 vue项目打包到django的项目部署

vue项目打包到django的项目部署.
复制链接

扫一扫

专栏目录

vue打包后配置到django

lucky__peng的博客

02-26

827

1.将dist目录复制到manage.py平级目录下 2.修改settings TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, 'dist')]#修改模板文件的查找位置 , 'APP_DIRS': True, 'OPTIONS': {

Vue3+Django4项目整合

a820206256的博客

11-13

1483

前端使用vue，后端使用Django，怎么把Vue项目丢到Django运行呢？此时，在终端运行python manage.py runserver 就能看到我们的项目了。前端vue项目写完后，在vue.config.js里加入。把dist文件夹丢到Django项目根目录,与APP同级。运行完成后会生成dist文件夹,就是我们打包好的项目。然后打开settings.py配置。接下来我们去后端Django配置。前端使用vue-cli版本。把dist文件夹放到桌面。后端django版本。然后再项目根路由导入。

1 条评论您还未登录，请先登录后发表或查看评论

Django+Vue服务器简单部署

热门推荐

AlexGeek

10-07

2万+

由于现在前端使用的三大框架配合webpack可以实现快速打包，为部署到服务端提供了非常大的便利，那么在前端打包后，应该做些什么可以部署到django的后台中呢？ 1.打包后文件包dist 进入到 dist文件包会发现是这个样子的： 2.在django项目中创建前端文件包（静态资源包，我习惯起名为frontend）然后把dist文件包中的static文...

django接入vue

xiao-啸

09-30

1538

django接入vue build运行vue npm run build 这是你的vue项目里就会有个dist文件夹把index.html放在Django的template下, 其它文件放在static 配置settings 修改index.html需要的js路径写入url # 最简单的通用类视图。一般在仅仅渲染一个模板时派上用场。可直接在URLconf中使用...

Django SimpleUI与vue的完美结合

qq_33816243的博客

09-15

5057

django 与django simple ui的黄金组合，可以在短时间内快速开发出一套完整的admin后台管理页。但是现在越来越多的项目都开始使用前后端分离开发，如何将vue项目与django admin完美结合，根据需求实现首页以及其他页面的自定义开发？本文带你一探究竟。

django+vue分离项目实战.rar

09-03

- 部署项目到服务器，确保生产环境的稳定运行。这个实战项目涵盖了Web开发中的多个重要环节，对于学习和提升Django和Vue.js的综合运用能力非常有帮助。通过实践，你可以深入理解前后端分离的开发模式，掌握API设计...

Django + Vue + HTTP实现后台管理项目

05-03

本PPT重在产出后端框架Django，前端框架Vue，交互协议HTTP，前后端交互流程这几个方面。其中以一个我已经设计好的...有兴趣的朋友可下载观看，如有需要源码的朋友，可私信我获取gitee地址，方便更快速的学习知识点。

django vue前后端项目结合

05-24

本项目“django vue前后端项目结合”正是基于这一模式，利用Python的Django框架作为后端服务器，而前端则采用JavaScript的Vue.js库进行构建。这种组合可以充分利用Django的强大学习和开发资源，以及Vue.js的轻量级、...

vue.js项目实战,vue.js项目实战pdf下载,JavaScript

09-10

8. **部署上线**：指导如何将项目打包并部署到服务器，包括配置生产环境和优化。 9. **测试**：简述单元测试和集成测试的重要性，以及如何使用Jest或Mocha等工具进行Vue组件测试。 10. **Vue生态**：介绍一些常用...

vue与django集成打包的实现方法

12-13

1.首先创建 django项目并在 django项目文件下创建vue项目 2.修改django项目文件下的setting.py 修改django模板路径指向 vue项目的dist TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR+"/vue-resources/dist"], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [

django-vue3-admin

04-22

8. **Webpack**：Vue.js项目通常会用到Webpack进行模块打包，将多个源文件合并成一个或多个可部署的生产文件。 9. **Vue Router**：Vue.js的官方路由库，用于管理页面间的导航和视图切换。 10. **Echarts图表库**...

vue+django的项目部署问题

qq_44774831的博客

05-07

2161

将vue项目打包后部署到django中一、两种方式结合(任选一种)第一种：将打包好的static和index分开放的方式0. 环境搭建1.前端vue的打包2.后端django中的文件设置3.后端django中代码配置A.在settings.py中B.在urls.py中第二种：将static和index放在一个frontend文件夹下1.前端项目打包2.后端django中3.后端django代码设置二、如何把github或gitee拉下来的django代码再去生成数据库先新建一个数据库两个命令三、项目跑起来！

Django项目使用vue打包前端页面使用教程

唯有热爱可抵万难

02-27

492

本文将教会你如何使用vue进行打包前端项目，并且将打包后的文件配置到Django项目当中，以便Django项目可以直接访问vue制作的精美页面。从0到1的配置修改，打包方法说明。

vue打包至django集成运行中遇到的问题

DrinkOolongTea

05-16

932

我们要实现的目标是在vue项目中 npm run build生成的dist目录放在django项目中同django项目一起运行在vue.config.js的module.exports中加入一行因为如果不配置这个的话静态资源直接生成在nodejs打包后的dist目录 django无法直接调用到，只能在dist下新建一个目录进行调用 assetsDir: 'static', 在django的setting.py中配置 TEMPLATES = [ { ..... '

Django+Vue前后端分离需要进行的操作+vue打包

Princekin_的博客

06-14

957

pycharm professional 中直接新建项目，在终端创建app（需要先进入项目根目录下）在setting.py文件中注册app

vue+django前后端分离之hippo前端初始化(npm && vue-cli)

Sunny_Future的博客

01-19

609

1、node.js 安装 1.1 nvm方式 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。由于node.js的版本更新迭代很快，所以你可能会遇到同一台电脑来维护多个版本的node.js开发的项目，那么自己电脑上对于多个nodejs的解释器管理起来就比较困难了，所以你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。 nvm工具的下载和安装： win: https://www.jianshu.com/p/d0e0935b150a

【服务器部署】两个Vue3+Django+Celery+Websocket部署

weixin_53950583的博客

11-12

996

django+celery+websocket的部署

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交