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

luanmabug

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

阅读量3.7k

点赞数 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和修正图片路径问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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"),

]

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

luanmabug

关注关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue项目打包到django部署

lymmurrain的博客

10-28

3759

前言 Vue项目一般用于实现前端的单页面富应用，其打包后的文件可简单看作静态文件，所以可以通过Nginx部署，当然也可以通过django部署(毕竟本质上还是一个html文件及各CSS,JS文件的集合)。通过django部署还可以省去一些跨域的麻烦，不过前后端的耦合性就比完全分开部署的差一点。测试所使用框架版本 django 3.06，VueCli 3.0 Vue打包修改vue.config.js(VueCli3.0新建的项目里没有，要在项目目录新建一份) 修改为 module.exports = {

vue打包后配置到django

lucky__peng的博客

02-26

920

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

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

如何将Vue打包放入Django

cacique111的博客

01-16

1184

如何将Vue打包放入Django

vue3如何配置环境和打包

热门推荐

AlexGeek

10-07

2万+

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

django vue 项目打包部署

weixin_42607969的博客

02-12

589

Django 和 Vue 都是常用的 web 开发框架，在项目打包部署时可以有不同的方法。如果是 Django 项目，通常使用 gunicorn 或 uwsgi 作为服务器，配合 Nginx 反向代理使用，并使用 supervisor 管理进程。如果是 Vue 项目，通常会使用打包工具，如 webpack，将前端代码打包成静态文件，然后使用 Nginx 部署，也可以使用 Node.js 的后端...

vue3知识点8 vuecli4.5项目打包配置

yangyangdt的博客

01-26

1032

vuecli4.5版本的打包配置。

django+vue分离项目实战.rar

09-03

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

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

09-10

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

Python+Vue+Django前后端分离项目实战

06-18

平时不明白的知识点，放在项目里去理解就恍然大悟了。一、融汇贯通本视频采用了前后端分离的开发模式，前端使用Vue.js+Element UI实现了Web页面的呈现，后端使用Python 的Django框架实现了数据访问的接口，前端...

前端vue3+后端django+腾讯云服务器windows版上线部署

m0_52041525的博客

11-13

1998

vue3+django上线部署腾讯云服务器windows版

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

10-16

主要介绍了vue与django集成打包的实现方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

weixin_53950583的博客

11-12

1343

django+celery+websocket的部署

vue + django 项目打包上线

weixin_38848757的博客

05-07

357

Vue 在 Vue 项目 vue.config.js 中加入 publicPath 配置项 module.exports = { publicPath: '/front', ... }

【VueCli】项目部署到Django服务器

qq_45388369的博客

08-14

474

vuecli打包创建文件夹blogs，在当前路径下，使用vue可视化界面（vue ui）创建项目在blog_client文件夹下打开终端输入（npm run serve）运行vuecli。在打包项目之前需在blog_client文件目录下新建文件vue.config.js，设置项目打包静态文件的输出位置，因为Django只认static，所以将输出路径设置为static 以下为我的vue.config.js文件内容: module.exports = { assetsDir: 'stati

Vue3+Django4项目整合

a820206256的博客

11-13

1977

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

解决Vue项目打包成dist放在Django中浏览器图标失效、页面跳转路由失效问题

sinat_37864181的博客

03-16

1526

自定义标题

vue-cli+Django

weixin_42929804的博客

12-17

667

vue-cli: 1、下载nodejs 2、npm换源持久使用 npm config set registry https://registry.npm.taobao.org // 配置后可通过下面方式来验证是否成功 npm config get registry // 或npm info express 3、安装脚手架 npm install -g vue-cli 4、创建一个vue的脚手架可以先 cd desktop【将当前目录切换到桌面】方便找到创建的脚手架, npm install -g @v