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

news/2024/7/10 2:08:58 标签: django, python, 前端, vue, ui

一、vue打包:

一般使用 npm run build 进行打包,打包完成后会生成一个dist文件夹

二、修改vue.config.js配置


vue.config..js配置里面增加:
        

assetsDir: 'static'

三、修改Django项目


将Django的static文件夹删除,移动dist进去,改名为static, 然后把static里面的sattic文件夹里面的css和js文件夹往外提一层,把static空文件夹删掉,参考图片:

删除前dist的目录配置:

替换static后的目录配置:

四、修改Django跟项目的urls.py

新增一条,按需引入需要的库:
path('', TemplateView.as_view(template_name='index.html'), name='index'),

五、访问页面检查是否正常


直接访问http://IP:PORT/即可正常访问vue当中router的 / 地址页面,比如项目地址为 http://127.0.0.1:8000/,则访问该地址即可进入vue的url为/的页面。


http://www.niftyadmin.cn/n/5402795.html

相关文章

C# 的一些好用的语法糖介绍

C# 中有很多语法糖&#xff08;Syntactic sugar&#xff09;&#xff0c;它们是一些语言特性&#xff0c;使得编写代码更加简洁、易读、更具表现力。 Lambda 表达式&#xff1a; Lambda 表达式允许你编写简洁的匿名函数。例如&#xff1a; Func<int, int, int> add (a,…

代码覆盖率工具Gcovr和Fastcov的性能对比

在软件开发过程中&#xff0c;代码覆盖率工具是非常重要的&#xff0c;它可以帮助开发人员评估他们的代码覆盖情况&#xff0c;从而更好地进行测试和调试。在这方面&#xff0c;Gcovr和fastcov是两个常用的工具。本文将对这两种工具的性能进行对比分析。 首先&#xff0c;让我…

Java核心技术第十章学习笔记

Java用户界面工具包简史 显示窗体 顶层窗口称为窗体&#xff0c;Frame类用于描述顶层窗口 1.创建窗体 package simpleFrame;import javax.swing.*;public class SimpleFrameTest {public static void main(String[] args) {var frame new SimpleFrame();frame.setDefaultC…

Unity曲柄滑块四杆机构运动计算

一、运动效果 二、机构的介绍 曲柄长度&#xff1a;a&#xff0c;线段AB长度 连杆长度&#xff1a;b&#xff0c;线段BC长度 偏心距离&#xff1a;e&#xff0c;滑块轨迹与曲柄中心点A的垂直距离 三、已知点A点B和e的值&#xff0c;计算C点的位置 1、计算s的值 var h math.…

Ubuntu20.04升级openssh9.4(源码升级)

目录 一、前景提要 二、先备份默认配置 三、卸载apt已安装OpenSSH 四、在线安装源码编译依赖环境 五、源码安装 六、还原之前的配置(如果权限安装跳过此步骤) 七、错误处理 一、前景提要 当前Linux Server上的OpenSSH版本太低&#xff0c;有漏洞而且不安全&#xff0c;…

docker 安装minio 一脚shell脚本

要创建一个用于安装Minio的Docker的Shell脚本&#xff0c;你可以按照以下步骤进行。这个脚本会执行以下操作&#xff1a; 拉取Minio的Docker镜像。创建一个Docker容器并映射端口。设置Minio的访问密钥和秘密密钥。持久化存储数据到本地目录。 以下是一个简单的Shell脚本示例&…

k8s节点负载使用情况分析命令kubectl describe node [node-name]

1.到任意安装了kubectl节点命令的节点上执行kubectl describe node [node-name] 上面的Requests最小分配 Limits最大分配是所有pod之和&#xff0c;最小分配之和不能超过服务器实际参数&#xff0c;否则新的pod会因为资源不够起不来&#xff0c;最大分配是预设之和&#xff0…

构筑未来商业智能——数据中台的战略视角_光点科技

随着数字化时代的加速到来&#xff0c;企业对于数据的依赖程度日益增强。数据中台&#xff0c;作为连接数据与商业决策的关键枢纽&#xff0c;已成为企业打造持久竞争优势的战略选择。本文将从战略的高度&#xff0c;解析数据中台如何帮助企业捕捉数据红利&#xff0c;推进业务…