1,将vue项目npm run build

  在此之前需要修改打包后的js,css文件路径:

    需新建vue.config.js

      在文件中添加:

    module.exports = {
        // 输出目录
        assetsDir: 'static',
        // 基本路径
       // baseUrl: './',
        };

2,在django中新建目录frontend

3,复制打包后的dist文件内容

4,将内容粘贴至frontend文件加内

5,取出static中的文件,放入frontend中,删除static文件

6,配置setting文件

(1)设置静态文件路径:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "frontend"),
]
(2)设置模板路径
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR,'frontend')], #修改此处
												

djang部署vue项目的更多相关文章

  1. 在nginx上部署vue项目(history模式);

    在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...

  2. 在nginx上部署vue项目(history模式)--demo实列;

    在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...

  3. nginx部署vue项目

    nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构 ...

  4. Docker 部署 vue 项目

    Docker 部署 vue 项目 Docker 作为轻量级虚拟化技术,拥有持续集成.版本控制.可移植性.隔离性和安全性等优势.本文使用Docker来部署一个vue的前端应用,并尽可能详尽的介绍了实现思 ...

  5. CentOS7 安装nginx部署vue项目

    简单描述:代码开发完了,需要环境来运行测试.服务器上没有nginx,搞起搞起.   在Centos下,yum源不提供nginx的安装,可以通过切换yum源的方法获取安装.也可以通过直接下载安装包的方法 ...

  6. centos部署vue项目

    参考链接 nodejs服务器部署教程二,把vue项目部署到线上 打包 #在本地使用以下命令,打包 npm run build #打包之后本地会出现dist文件夹.将dist文件夹以及package.j ...

  7. Linux 部署vue项目(使用nginx)

    1.部署Nginx 请参考Linux下部署nginx,此处不再重复 2.Vue项目打包 # 打包正式环境 npm run build:prod # 打包预发布环境 npm run build:stag ...

  8. 解决微信浏览器缓存站点入口文件(IIS部署Vue项目)

    最近开发的微信公众号项目中(项目采用Vue + Vux 构建,站点部署在IIS8.5上),遇到个非常奇葩的问题,发布站点内容后,通过微信打开网址发现是空白页面(后来验证是微信浏览器缓存了入口文件-in ...

  9. 部署vue项目到阿里云服务器(Ubuntu16.04 64位)

    上传文件 1.通过Xftp将vue项目文件上传至云服务器:由于node_modules这个依赖包体积较大,上传较慢,上传时跳过,在云服务器上重新进行npm install安装依赖包即可: 2.也可通过 ...

随机推荐

  1. 移动端页面字体——rem的使用

    浏览器的默认字体高是16px. 兼容性: 目前,IE9+,Firefox.Chrome.Safari.Opera 的主流版本都支持了rem. 对于不支持的浏览器,要多写一个绝对单位的声明,这样浏览器就 ...

  2. ajax修改表单的值后dom没更新的解决办法

    添加一个扩展方法,通过$("#id").html($("#id").formhtml())更改. 扩展方法: (function ($) { var oldHT ...

  3. leetcode1283 使结果不超过阈值的最小除数

    这道题第一思路是用二分查找 因为使用二分法:所以复杂度为O(n*logk), k介于 left=sum/threshold(向下取整) 和 right=num_max之间:而right<=10^ ...

  4. Spring Security登录超时,angular ajax请求出错自动跳转至登录页(jQuery也适用)

    公司开发采用Spring Security+AngualerJS框架,在session过期之后,ajax请求会直接出错.本文介绍如何实现出错情况下自动跳转至登录页. 整体思路是,session过期后, ...

  5. Apple全系列缓冲区溢出内核RCE(CVE-2018-4407)poc

    # CVE-2018-4407 ICMP DOS # https://lgtm.com/blog/apple_xnu_icmp_error_CVE-2018-4407 # from https://t ...

  6. Collection Map Java数据结构

    Collection Map 框架图 Collection          接口的接口   对象的集合 ├ List                   子接口      按进入先后有序保存   可 ...

  7. dbgrideh 中的keylist,picklist的用法

    dbgrideh procedure TForm1.FormCreate(Sender: TObject); begin DBGridEh1.DataSource:=DataSource1; Data ...

  8. 【Hadoop】Hadoop的数据压缩方式

    概述 ​ 压缩技术能够有效减少底层存储系统(HDFS)读写字节数.压缩提高了网络带宽和磁盘空间的效率.在Hadoop下,尤其是数据规模很大和工作负载密集的情况下,使用数据压缩显得非常重要.在这种情况下 ...

  9. 生命周期中mounted和created的区别。

    一.什么是生命周期? 用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程.虽然不太严谨,但是也基本上可以理解. 通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下cre ...

  10. HTML5元素周期表

    HTML5元素周期表 根元素 1. html 文档根元素 元数据和脚本 1. head HTML文档中的第一个元素.包含文档元数据 2. title 文档标题 3. meta 文档的元数据. meta ...