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

news2024/11/20 6:29:02

一、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.coloradmin.cn/o/1475453.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

工业RTU串口网关有哪些使用用途和使用场景

工业RTU串口网关有哪些使用用途和使用场景 搜索蓝蜂物联网官网,即可免费领取样机使用!!先到先得!!! 工业RTU串口网关在工业自动化领域中发挥着重要作用,其主要用途包括数据采集、协议转换、远…

Openstack云计算架构及前期服务搭建

openstack介绍 Openstack是一个开源的云计算管理平台项目,由几个主要的组件组合起来完成具体工作,支持几乎所有的云环境,项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台 ----百度百科 Openstack是一个云操作系统&a…

Leetcoder Day28| 贪心算法part02

122.买卖股票的最佳时机 II 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格。 设计一个算法来计算你所能获取的最大利润。你可以尽可能地完成更多的交易(多次买卖一支股票)。 注意:你不能同时参与多笔交易&#xff08…

逆向案例一:AES解密基于数位观察城市数据

import requests import json from Crypto.Cipher import AES # 开始解密 from Crypto.Util.Padding import unpad #去填充的逻辑 import base64 url https://app.swguancha.com/client/v1/cPublic/consumer/baseInfo data {current: 1,"dimensionTime": "20…

C# 学习第四弹——字符串

一、char类型的使用 字符使用单引号,单个字符 转义字符是一种特殊的字符变量,以反斜线开头,后跟一个或多个字符。 输出多级目录可以使用 二、字符串的声明和初始化 1、引用字符串常量 引用字符串常量初始化——字符使用单引号&#xff0…

阿里云A10推理qwen

硬件配置 vCPU:32核 内存:188 GiB 宽带:5 Mbps GPU:NVIDIA A10 24Gcuda 安装 wget https://developer.download.nvidia.com/compute/cuda/12.1.0/local_installers/cuda-repo-rhel7-12-1-local-12.1.0_530.30.02-1.x86_64.rpm s…

用Java语言创建的Spring Boot项目中,如何传递List集合呢?

前言: 在上篇文章中,用Java语言创建的Spring Boot项目中,如何传递数组呢??-CSDN博客,我们了解到Spring Boot项目中如何传递数组,但是,对于同类型的List集合,我们又该如何…

智能驾驶规划控制理论学习01-自动驾驶系统介绍、规划控制模块介绍

目录 一、自动驾驶系统概述 二、规划控制模块介绍 1、规划控制架构 2、规划控制目标 3、Cartesian和Frenet坐标系 4、Frenet坐标系概览 5、解耦式规划和联合式规划 一、自动驾驶系统概述 目前被国内外广为接受的自动驾驶级别划分标准是 SAE&#xff…

Java Web(八)--Servlet(二)

Servlet API Servlet API 包含以下4个Java包: 1. javax.servlet:其中包含定义Servlet和Servlet容器之间契约的类和接口。 2. javax.servlet.http:主要定义了与HTTP协议相关的HttpServlet类,HttpServletRequest接口和HttpServl…

Redis之一: 简介及环境安装搭建

什么是NoSQL? NoSQL,指的是非关系型的数据库。NoSQL有时也称作Not Only SQL的缩写,是对不同于传统的关系型数据库的数据库管理系统的统称。 NoSQL用于超大规模数据的存储。(例如谷歌或Facebook每天为他们的用户收集万亿比特的数据&#xf…

阿里云定价_ECS产品价格_云服务器收费标准 - 阿里云官方活动

2024年最新阿里云服务器租用费用优惠价格表,轻量2核2G3M带宽轻量服务器一年61元,折合5元1个月,新老用户同享99元一年服务器,2核4G5M服务器ECS优惠价199元一年,2核4G4M轻量服务器165元一年,2核4G服务器30元3…

【GPU驱动开发】- mesa编译与链接过程详细分析

前言 不必害怕未知,无需恐惧犯错,做一个Creator! 一、总体框架图 暂时无法在飞书文档外展示此内容 二、Mesa API 处理 OpenGL 函数调用 Mesa API 负责实现 OpenGL 和其他图形 API 的函数接口。Mesa API 表是一个重要的数据结构&#xf…

别再让机会从指缝间溜走!社科院与杜兰大学金融管理硕士一同开创你的成功之路

新的一年,你的读研计划进行到哪个环节了呢?咨询社科院与杜兰大学金融管理硕士项目中,总听到有同学说,不着急,我先了解一下。你不知道是时间总是在指缝间溜走。别让犹豫成了我们前进的阻碍,马上行动早日遇到…

WPF的DataGrid自动生成中文列头

直接将一个对象集合绑定到DataGrid上面,设置自动生成列AutoGenerateColumns"True",DataGrid会自动根据对象类的属性生成对应的列 示例类对象: public class DataModel{public int Id { get; set; }public string Name { get; set;…

Ansible自动化运维(四)jinja2 模板、Roles角色详解

👨‍🎓博主简介 🏅云计算领域优质创作者   🏅华为云开发者社区专家博主   🏅阿里云开发者社区专家博主 💊交流社区:运维交流社区 欢迎大家的加入! 🐋 希望大家多多支…

【Pytorch】Transfer Learning 迁移学习

文章目录 1. 获取数据2. 创建Dataset和DataLoader3. 获取预训练模型4. 训练模型5. 通过绘制损失曲线来评估模型6. 对测试集中的图像进行预测补充 迁移学习允许我们采用另一个模型从另一个问题中学到的模式(也称为权重)并将它们用于我们自己的问题。 例如…

51单片机 wifi连接

一、基本概念 ESP8266是一款集成了WiFi功能的高性能芯片,广泛应用于物联网设备、智能家居、传感器网络等领域。以下是ESP8266的详细讲解: 1. 功能特点:ESP8266集成了TCP/IP协议栈,支持STA(Station)和AP&am…

Kamacoder第八题摆平积木的C语言解法

8. 摆平积木 时间限制:1.000S 空间限制:32MB 题目描述 小明很喜欢玩积木。一天,他把许多积木块组成了好多高度不同的堆,每一堆都是一个摞一个的形式。然而此时,他又想把这些积木堆变成高度相同的。但是他很懒&…

[足式机器人]Part2 Dr. CAN学习笔记-Ch00-2 - 数学知识基础

本文仅供学习使用 本文参考: B站:DR_CAN 《控制之美(卷1)》 王天威 《控制之美(卷2)》 王天威 Dr. CAN学习笔记-Ch00 - 数学知识基础 Part2 4. Ch0-4 线性时不变系统中的冲激响应与卷积4.1 LIT System:Linear Time Invariant4.2 卷积 Convolution4.3 单位冲激 Unit Impulse—…

上传大文件报错No data found for resource with given identifier

预览中的数据No data found for resource with given identifier 首先以为是nginx问题查看nginx日志 39.89.216.201 - - [27/Feb/2024:10:14:53 0800] "POST /api/crm/clue/upload HTTP/1.1" 499 0 "https://op-dev.*.com/customer/clue-management" &qu…