在django中部署vue项目,不单独抽离dist文件
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文件的更多相关文章
- centos 部署 vue项目
安装Nodejs 下载安装包,可选择其他版本 node-v10.16.0-linux-x64.tar.xz 将下载文件上传至linux服务器并解压 tar -xvf node-v10.16.0-lin ...
- nginx部署vue项目
nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构 ...
- 在nginx上部署vue项目(history模式);
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
- 在nginx上部署vue项目(history模式)--demo实列;
在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...
- Docker 部署 vue 项目
Docker 部署 vue 项目 Docker 作为轻量级虚拟化技术,拥有持续集成.版本控制.可移植性.隔离性和安全性等优势.本文使用Docker来部署一个vue的前端应用,并尽可能详尽的介绍了实现思 ...
- CentOS7 安装nginx部署vue项目
简单描述:代码开发完了,需要环境来运行测试.服务器上没有nginx,搞起搞起. 在Centos下,yum源不提供nginx的安装,可以通过切换yum源的方法获取安装.也可以通过直接下载安装包的方法 ...
- 在Tomcat中部署Web项目的操作方法,maven项目在Tomcat里登录首页报404
maven项目在Tomcat里登录首页报404, 解决:编辑conf/server.xml进行配置<Host>里的<Context>标签里的path. <Context ...
- 在Tomcat中部署web项目的三种方式
搬瓦工搭建SS教程 SSR免费节点:http://www.xiaokeli.me 在这里介绍在Tomcat中部署web项目的三种方式: 1.部署解包的webapp目录 2.打包的war文件 3.Man ...
- linux 环境下tomcat中部署jfinal项目
tomcat中部署jfinal项目 问题现象如下图 问题描述: 我在自己的windows7系统上tomcat下面跑这个项目没有任何问题吗,但是当我把项目上传到linux服务器上的tomcatwebap ...
随机推荐
- 移动端——meta标签
meta标签主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用. <meta http-equiv="Content-type" conte ...
- Android即时通讯开发之XMPP (一)初识XMPP协议和asmack
在讲XMPP和asmck之前 ,我还是先分享一些资源文档,如果你有耐心,可以直接忽略我下面所写的.下面有关XMPP的介绍大部分是摘抄网上的文档,后面我会写一些基于XMPP协议和asmck开源库的聊天室 ...
- Spring Boot AOP Demo
什么是AOP? AOP面向切面,切面将那些与业务无关,却被业务模块共同调用的逻辑提取并封装起来,减少了系统中的重复代码,降低了模块间的耦合度,同时提高了系统的可维护性. 实现策略JAVA SE动态代理 ...
- 一百零四:CMS系统之修改邮箱界面
在base.css中加一个全局的css控制宽度 .form-container{ width: 300px;} 视图 class ResetEmailView(views.MethodView): d ...
- 关于MacBook Pro外接4K/60HZ显示器的问题
我踩过的坑 MacBook Pro 外接 4K/60HZ显示器[显示器自带HDMI2.0支持4k] 拓展坞不支持4K/60HZ,最后导致只能支持 30HZ,鼠标移动明显延迟. 总结如下: DVI线类长 ...
- React Native使用Mobx总结
参考博客: http://www.jianshu.com/p/505d9d9fe36a 这是我看的学习Mobx目前为止觉得最详细学习的博客了. 下面只是记录下我的学习和一些简单的使用: 需要引入 ...
- Java内部类(5):应用例
例1-闭包(Closure) 闭包是一个可调用的对象(通过Callback),它记录了一些信息,这些信息来自于创建它的作用域 interface Incrementable { void increm ...
- react 添加 react-redux 基本用法
安装 yarn add react-redux 创建文件.文件夹 |- redux |- actions.js |- reducer.js |- store.js actions.js export ...
- 关于Spring的BeanUtils
文章<用Spring的BeanUtils前,建议你先了解这几个坑>里面,作者最后得到了这几个结论: 1.Spring得BeanUtils得CopyProperties方法需要对应得属性有g ...
- 【POJ - 3614】Sunscreen (优先队列)
Sunscreen Descriptions C (1 ≤ C ≤ 2500) 头奶牛在海滩边晒太阳,要避免在日光浴时产生难看的灼伤,每头奶牛必须用防晒霜覆盖它的皮肤.第 i 头奶牛有一个最小和最大 ...