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实用技巧(一)
Aug 16 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
微信小程序五星评分效果实现代码
Apr 06 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 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
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
定义php常量的详解
2013/06/09 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
基于jQuery的js分页代码
2010/06/10 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
Python2中的raw_input() 与 input()
2015/06/12 Python
详解Python中的日志模块logging
2015/06/19 Python
Python异常处理操作实例详解
2018/08/28 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
《木笛》教学反思
2014/03/01 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
个人求职信范文
2014/05/24 职场文书
房地产项目合作意向书
2015/05/08 职场文书
女方离婚起诉书
2015/05/18 职场文书
从事会计工作年限证明
2015/06/23 职场文书
青年教师听课心得体会
2016/01/15 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python