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 相关文章推荐
javascript TextArea动态显示剩余字符
Oct 22 Javascript
关于this和self的使用说明
Aug 01 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
Vuex简单入门
Apr 19 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
微信小程序监听用户登录事件的实现方法
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中iconv函数知识汇总
2015/07/02 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
JavaScript 基本概念
2015/01/20 Javascript
JS的数组迭代方法
2015/02/05 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
简述Python中的面向对象编程的概念
2015/04/27 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
python读取Kafka实例
2019/12/23 Python
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
Linux常见面试题
2016/10/04 面试题
财务助理岗位职责
2013/11/10 职场文书
退休感言
2014/01/28 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
党性观念心得体会
2014/09/03 职场文书
决心书格式范文
2015/09/23 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python