vue与django集成打包的实现方法


Posted in Javascript onNovember 11, 2019

1.首先创建 django项目 并在 django项目文件下创建vue项目

2.修改django项目文件下的setting.py

修改django模板路径 指向 vue项目的dist

TEMPLATES = [
  {
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [BASE_DIR+"/vue-resources/dist"],
    'APP_DIRS': True,
    'OPTIONS': {
      'context_processors': [
        'django.template.context_processors.debug',
        'django.template.context_processors.request',
        'django.contrib.auth.context_processors.auth',
        'django.contrib.messages.context_processors.messages',
      ],
    },
  },
]

修改django静态文件路径

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/

STATIC_URL = '/static/'
STATICFILES_DIRS = [
  os.path.join(BASE_DIR, "vue-resources/dist/static/")
]

这样基本就可以了

3.vue打包配置

由于django和vue都可以起一个服务,导致多个域名这样测试api的时候就会需要跨域等等问题,而直接用run build 打包文件过于耗时 大概20-40秒时间。

理想的状态是,不用多个域名,且修改一个文件能快速打包。 那么最好的方式就是提高build的速度。

我的方式是:

1.复制wepack.dev.config.js文件 起名 webpack.watch.config.js
2.修改配置信息

(1)添加输出配置 (用这个配置打包大概2-3秒)

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[hash].js'),
    chunkFilename: utils.assetsPath('js/[id].[hash].js')
   },

(2)可选修改可有效提高打包速度 (用这个配置大概在1秒内)

devtool: false,

3.创建新的打包命令 package.json

"scripts": {
  ...
  "watch": "webpack --watch --config build/webpack.watch.conf.js",
  ...
 },

这样就实现了监听更新的效果 npm run watch

注:本配置只是方便本地开发

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js星星评分效果
Jul 24 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 Javascript
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
微信小程序监听用户登录事件的实现方法
Nov 11 #Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 #Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 #jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 #jQuery
jquery ajax 请求小技巧实例分析
Nov 11 #jQuery
javascript 对象 与 prototype 原型用法实例分析
Nov 11 #Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 #Javascript
You might like
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
JavaScript全局函数使用简单说明
2011/03/11 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
详解JavaScript的this指向和绑定
2020/09/08 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
Linux下python3.7.0安装教程
2018/07/30 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
物业电工岗位职责
2013/11/20 职场文书
个人求职信范文分享
2014/01/06 职场文书
搞笑爱情保证书
2014/04/29 职场文书
学校宣传标语
2014/06/18 职场文书
小学生读书活动总结
2014/06/30 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
高一化学教学反思
2016/02/22 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL