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

2024-09-29 15:20:10

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Django与Vue语法的冲突问题完美解决方法

当我们在django web框架中,使用vue的时候,会遇到语法冲突. 因为vue使用{{}},而django也使用{{}},因此会冲突. 解决办法1: 在django1.5以后,加入了标签: {% verbatim myblock %} {% endverbatim myblock %} 被此标签包裹的代码将不会被Django的模板引擎渲染. 因此,我们可以把带有{{ }} 的Vue代码放在 {% verbatim myblock %}标签中间,例如: <div id="app1&quo
django rest framework vue 实现用户登录详解

后端代码就不介绍了,可以参考 django rest framework 实现用户登录认证这里介绍一下前端代码,和前后端的联调过程在components下新建login.vue 文件 <template> <div class="login"> <el-form label-width="80px"> <el-form-item label="用户名"> <el-input v-model
django中使用vue.js的要点总结

有接口如下: http://127.0.0.1:8000/info/schemes/ 返回json数据: [ { "name": "(山上双人标准间)黄山经典二日游(魅力黄山,日出云海,人间仙境,春暖花开)", "day": 2, "night": 1, "favorites": 0, "score_avg": 4, "photo_url": "/media
Django+vue跨域问题解决的详细步骤

跨域由于开发模式为前后端分离式开发,故而通常情况下,前端和后端可能运行不同的ip或者port下,导致出现跨域问题,故而单独说明什么是跨域跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景. 什么是同源策略? 同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS.
详解django模板与vue.js冲突问题

问题: django模板与vue.js的变量都是使用"{{"和"}}"包裹起来的,在渲染django模板时会先替代掉所有的"{{"和"}}"及被包裹在其中的内容,使得vue.js没有使用"{{"."}}"来绑定变量. 处理方法: 方法1:修改vue.js的默认的绑定符号 Vue.config.delimiters = ["[[", "]]"]; 执
django和vue实现数据交互的方法

我使用的是jQuery的ajax与django进行数据交互,遇到的问题是django的csrf 传输数据的方法如下: $(function() { $.ajax({ url: 'account/register', type: 'post', dataType:'json', data: $('#form1').serialize(), success: function (result) { console.log(result); if (result) { alert("result&qu
Vue+Django项目部署详解

本地项目配置 1 复制 luffy/settings/dev.py为prop.py 修改luffy/settings/prop.py中以下几项 (1) allow_hosts ALLOWED_HOSTS = [ 'api.youdomain.com', ] (2) 跨域白名单 CORS_ORIGIN_WHITELIST = ( # 前端域名 "www.youdomain.com", # 后端api接口域名 "api.youdomain.com" ) (3) 支付宝电
Django+Vue跨域环境配置详解

概述在使用Django+Vue开发过程中,遇到了很多开发环境相关的问题,比如跨域,比如ajax请求参数等,本篇文章主要记录解决在开发过程中,遇到的一些问题. 跨域不带Cookie 在使用Vue脚手架开发的过程中,会使用Vue脚手架自带的Server进行项目调试,Vue自带的Server支持 hot reloading ,这个特性是非常好用的.但是在开发过程中,因为要与后端交互,所以在请求后端接口的时候,会遇到跨域问题,这个问题在一些职责划分清楚的团队并不存在,因为前端开发人员会才用Mock数据
vue与django集成打包的实现方法

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': { 'c
Django集成搜索引擎Elasticserach的方法示例

1.背景当用户在搜索框输入关键字后,我们要为用户提供相关的搜索结果.可以选择使用模糊查询 like 关键字实现,但是 like 关键字的效率极低.查询需要在多个字段中进行,使用 like 关键字也不方便,另外分词的效果也不理想. 全文检索方案全文检索即在指定的任意字段中进行检索查询. 全文检索方案需要配合搜索引擎来实现. 搜索引擎原理搜索引擎进行全文检索时,会对数据库中的数据进行一遍预处理,单独建立起一份索引结构数据 . 索引结构数据类似字典的索引检索页 ,里面包含了关键词与词条的对
vue解决使用webpack打包后keep-alive不生效的方法

问题是这样的,我使用webpack的npm run dev运行的时候,keep-alive路由缓存是有效的,但是我npm run build,把文件放到实际的项目中去的时候,会有如下的问题: 路由如下: var menus = [ { path: '/user', name: '用户', component: '/user', redirect: '/user/index1', icon: 'fa-bandcamp', meta: { keepAlive: false }, children:
vue多页面开发和打包正确处理方法

前段时间做项目,技术栈是vue+webpack,主要就是官网首页加后台管理系统根据当时情况,分析出三种方案一个项目代码里面嵌两个spa应用(官网和后台系统) 分开两套项目源码一套项目源码里面就一个spa应用思考: 直接否定了一套项目源码里一个spa应用(ui样式会相互覆盖,如果没有代码规范后期比较难维护) 两套源码的话,后台可能开两个端口,然后需要用nginx反向代理可能比较麻烦,而且前端开发也比较麻烦麻烦,毕竟需要维护两个git仓库,两套git上线流程,可能会损耗很多时间. 对自己的技
vue完成项目后,打包成静态文件的方法

vue完成项目后,如何打包成静态文件,并且用Node调试打包 1.修改config里面的index.js里面的productionSourceMap为false,默认情况是true(true代表打包环境是开发环境,可以进行调试:false表示生产环境,正式上线的) 2.在cmd里面运行npm run build,(运行的是build里面的build.js文件) 生成的包放在dist下面使用node进行调试 1.在根目录下创建prod.server.js文件,这个文件的作用是作为一个小的htt
Vue webpack 项目自动打包压缩成zip文件的方法

这段时间用 Vue2.0 开发项目,每次打包都会用到 npm run build 命令,但是每次部署时给后端发包都要手动zip压缩,这样一两次还行,但遇到项目板块测试和临时加急功能测试的时候,一天可能就要打包好多次,这就很烦了.所以索性在执行 npm run build 命令时就直接打包成zip文件,方便省事! 1.插件装备 webpack插件:filemanager-webpack-plugin,该插件可执行打包,复制,移动,删除文件以及新文件夹在build之前及之后创建. 安装: npm i
Vue中跨域及打包部署到nginx跨域设置方法

众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的mock数据,而如果本地程序直接访问远程接口, 肯定会遇到跨域问题. 什么是跨域?实现跨域的多种方式? 这里我就不详细介绍了,大家自行百度哈为什么要实现前端跨域一般来讲,前后端分离的项目在大公司都会由后台设置允许跨域访问,因为后台设置允许跨域是很简单和方便的,但是某些情况下,一些小公司或者你工作的场所后台不怎么配合的情况下,这就需要前端来配置跨域请求来方便我们使用接口 vue项目中的配置
Vue工程模板文件 webpack打包配置方法

1.github github地址:https://github.com/MengFangui/VueProjectTemplate 2.webpack配置 (1)基础配置webpack.base.config.js const path = require('path'); //处理共用.通用的js const webpack = require('webpack'); //css单独打包 const ExtractTextPlugin = require('extract-text-webp
Django集成百度富文本编辑器uEditor攻略

首先从 ueEditor官网下载最新版本的包,目前官网上提供了ASP..NET.PHP.JSP版本的,django版本只有一个第三方个人开发的,但看上出配置起来稍微复杂一点. 这里不介绍uEditor的使用方法,也不过多解释uEditor的配置方法,官网上都有详细的文档和API介绍,下载的Demo中也有常用的方法的示例代码,这里主要介绍uEditor和django集成需要修改的地方. 这里下载任意一个版本的都可以,因为我们只需要把关于ueEditor前端部分的抽取出来,至于后端服务器的,我们自

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

相关推荐

随机推荐