1,在django项目下(app所在目录),新建vue项目,使用脚手架构建vue项目,vue create (项目名)

2,构建好以后,配置django:

    (1),配置settings:

      · 修改templates: 

        TEMPLATES = [
          {
           'BACKEND': 'django.template.backends.django.DjangoTemplates',
          'DIRS': [os.path.join(BASE_DIR,'(vue项目根目录名)/dist')], //只修改这一条,将dist文件路径写入 
     · 添加STATICFILES_DIRS字段:

       STATIC_URL = '/static/'

       STATIC_ROOT = os.path.join(BASE_DIR, '(vue项目根目录名)/dist/static') //static路径需要配置vue,下面会说到(第5点)

       STATICFILES_DIRS = [ os.path.join(BASE_DIR, "(vue项目根目录名)/dist"),]

3,在app视图中添加视图函数,渲染index.html(dist中的html页面)页面:

      def index(request):
       request.META["CSRF_COOKIE_USED"] = True //这个防跨域的
       return render(request,'index.html')
4,url中配置路径:
      path('index/',views.index,name='index'),

5,vue中添加vue.config.js修改dist静态文件路径配置:
      module.exports = {
              // 输出目录
              assetsDir: 'static',
              // 基本路径
              // baseUrl: './',
        }; 6,切换至vue项目所在目录,npm run build,然后将dist/static/静态文件(css,js等文件)抽离值dist目录下,删除static目录。然后即可通过django后端访问vue页面
 注:每次修改vue,都需要重重新build,切抽离静态文件

在django中部署vue项目,不单独抽离dist文件的更多相关文章

  1. centos 部署 vue项目

    安装Nodejs 下载安装包,可选择其他版本 node-v10.16.0-linux-x64.tar.xz 将下载文件上传至linux服务器并解压 tar -xvf node-v10.16.0-lin ...

  2. nginx部署vue项目

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

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

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

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

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

  5. Docker 部署 vue 项目

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

  6. CentOS7 安装nginx部署vue项目

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

  7. 在Tomcat中部署Web项目的操作方法,maven项目在Tomcat里登录首页报404

     maven项目在Tomcat里登录首页报404, 解决:编辑conf/server.xml进行配置<Host>里的<Context>标签里的path. <Context ...

  8. 在Tomcat中部署web项目的三种方式

    搬瓦工搭建SS教程 SSR免费节点:http://www.xiaokeli.me 在这里介绍在Tomcat中部署web项目的三种方式: 1.部署解包的webapp目录 2.打包的war文件 3.Man ...

  9. linux 环境下tomcat中部署jfinal项目

    tomcat中部署jfinal项目 问题现象如下图 问题描述: 我在自己的windows7系统上tomcat下面跑这个项目没有任何问题吗,但是当我把项目上传到linux服务器上的tomcatwebap ...

随机推荐

  1. 一个Action中,可以写多个类似的业务控制方法

    1)通过模块根路径 + 功能子路径 = 访问模块下子功能的路径 @Controller @RequestMapping(value="/user") public class Us ...

  2. .SpringIOC容器

    创建对象 SpringIOC容器,是spring核心内容. 作用: 创建对象 & 处理对象的依赖关系 IOC容器创建对象: 创建对象, 有几种方式: 1) 调用无参数构造器 2) 带参数构造器 ...

  3. 利用phpStudy 探针 提权网站服务器

    声明: 本教程仅仅是演示管理员安全意识不强,存在弱口令情况.网站被非法入侵的演示,请勿用于恶意用途! 今天看到论坛有人发布了一个通过这phpStudy 探针 关键字搜索检索提权网址服务器,这个挺简单的 ...

  4. Java面试题准备(掌握)

    1.使用什么方式进行文件上传? 一般使用FormData对象,ajax异步上传. 为什么使用? 1.FormData对象Mozilla上的介绍的,XMLHttpRequest Level 2添加了一个 ...

  5. 权限控制(delphi actionlist)

    权限控制(delphi TActionList方案)在软件开发中,为软件加入权限控制功能,使不同的用户有不同的使用权限,是非常重要的一项功能,由其在开发数据库方面的应用,这项功能更为重要.但是,要为一 ...

  6. iptable规则的执行顺序

    众所周知,iptable的中包含了各种各样的table和规则链条.这篇博文对规则链的执行顺序做一个简单的介绍. Chain OUTPUT (policy ACCEPT)target prot opt ...

  7. Leetcode刷题6—不同路径

    一.要求 二.知识点 这道题属于动态规划,主要思路就是将大问题不断分解成小问题进行求解 三.解题思路 1.利用数学思路找规律 将m和n组合成一个m*n的矩阵,而且是一个对称阵 [[0],[1],[1] ...

  8. 安装与编译Dlib(以Ubuntu16.04+Python3.6+pip为例)

    安装与编译Dlib(以Ubuntu16.04+Python3.6+pip为例) Step1:下载Ubuntu (or Linux)系统支持库=>Install OS libraries -dev ...

  9. 【Abode Air程序开发】iOS证书(.p12)和描述文件(.mobileprovision)申请

    iOS证书(.p12)和描述文件(.mobileprovision)申请 5+App开发 Apple证书 iOS证书 iOS有两种证书和描述文件: 证书类型 使用场景 开发(Development)证 ...

  10. 内存块是一种数据结构,内核对象&句柄

    内核对象&句柄 目录 1 内核对象的概念 2 内核对象的使用计数 3 句柄 4 句柄表   项目工程代码中设计句柄的使用,一时不知句柄是何物,通过查阅自学之后,对句柄及其使用有一个初步的了解. ...