用vue2.0开发项目,使用npm run build 命令 ,但是只会生成dist文件夹,以下是生成zip压缩包方法

1,插件安装

webpack插件安装 filemanager-webpack-plugin,该插件可执行打包,复制,移动,删除文件以及新文件夹在build之前及之后创建。

安装:      npm install filemanager-webpack-plugin --save-dev  或 npm install filemanager-webpack-plugin --save-dev

2.webpack配置

1)在项目 根目录 build/webpack.base.config.js 中抬头变量声明区域添加

const FileManagerPlugin = require('filema nager-webpack-plugin')

2) 在根目录 build/webpack.base.config.js 内找到 module.exports。 然后在plugins内添加

  new FileManagerPlugin({
      onEnd: {
          delete: [
              './dist/mydemo.zip',
          ],
          archive: [
              {source: './dist', destination: './dist/mydemo.zip'},
          ]
      }
  })

若 plugins不存在,则新建plugins,plugins为数组格式。

3.执行效果 
配置完成后,重新执行 npm run build 命令 执行完后 ,在dist文件夹内(上面配置的目的地目录为 dist文件夹)就可以看到

												

vue -- vue-cli webpack项目打包后自动压缩成zip文件的更多相关文章

  1. vue-webpack项目自动打包压缩成zip文件批处理

    为什么需要这个? 使用vue框架开发项目,npm run build这个命令会一直用到,如果需要给后端发包,那你还要打包成zip格式的压缩包,特别是项目提测的时候,一天可能要执行重复好几次,所以才有了 ...

  2. vue+webpack项目打包后背景图片加载不出来问题解决

    在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...

  3. Vue -- webpack 项目自动打包压缩成zip文件

    这段时间用 Vue2.0 开发项目,每次打包都会用到 npm run build 命令,但是每次部署时给后端发包都要手动zip压缩,这样一两次还行,但遇到项目板块测试和临时加急功能测试的时候,一天可能 ...

  4. vue.js - 解决vue-cli打包后自动压缩代码

    一.webpack中引入的压缩代码 /build/webpack.prod.conf.js const OptimizeCSSPlugin = require('optimize-css-assets ...

  5. .net 生成html文件后压缩成zip文件并下载

    这里只做一个简单的实例 public ActionResult Index() { string path = Server.MapPath("/test/");//文件输出目录 ...

  6. vue项目打包后想发布在apache www/vue 目录下

    使用的是vue-element-admin做示例,可以参考Vue项目根据不同运行环境打包项目,其他项目应该大同小异. 使用vue-router的browserHistory模式,配置mode: 'hi ...

  7. vue项目打包后资源相对引用路径的和背景图片路径问题

    vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...

  8. vue项目打包后运行报错400如何解决

    昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...

  9. Vue.js中用webpack合并打包多个组件并实现按需加载

    对于现在前端插件的频繁更新,所以多多少少要对组件化有点了解,下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料,需要的朋友可以参考下.   前言 随着 ...

随机推荐

  1. Python模块之snmp-cmds,easysnmp

    一.简介 snmp-cmds模块通过SNMP与目标设备进行通信,此模块适用于windows,此模块是基于系统已安装了net-snmp环境easysnmp模块通过SNMP与谬表设备进行通信,此模块用于l ...

  2. c中自增自减的妙用

    #include <stdio.h> int main() { ; printf("%d,%d,%d,%d",i++;i--;++i;--i); /*运算从右往左运算 ...

  3. 使用docker快速搭建本地环境

    在平时的开发中工作中,环境的搭建其实一直都是一个很麻烦的事情 特别是现在,系统越来越复杂,所需要连接的一些中间件也越来越多. 然而要顺利的安装好这些中间件也是一个比较费时费力的工作. 俗话说" ...

  4. 企查查app (完结)

    在经历前两次探索之后,终于可以把所有的加密关键参数搞定了. 已删除!!!! 好了现在基本结束了. 根据这个我写了一自动抓取企查查每日新增数据,需要的话可以去看看 企查查app新增企业数据抓取 关注小白 ...

  5. HBase 系列(十)—— HBase 的 SQL 中间层 Phoenix

    一.Phoenix简介 Phoenix 是 HBase 的开源 SQL 中间层,它允许你使用标准 JDBC 的方式来操作 HBase 上的数据.在 Phoenix 之前,如果你要访问 HBase,只能 ...

  6. Vuex模块化

    上图是vuex的结构图vuex即 store, 包含State,Action,Mutations, 每一个vue项目都需要使用vuex做组件之间的数据共享 使用场景: 数据最终存放在store的Sta ...

  7. Python笔记_初级语法

    1.标识符与变量 1.1 标识符 规范 只能由数字,字母,_(下划线)组成 不能以数字开头 不能是关键字 区分大小写 命名约束 下划线分隔法(推荐): 多个单词组成的名称,使用全小写字母书写,中间使用 ...

  8. 新手学习FFmpeg - 调用API完成录屏

    调用FFMPEG Device API完成Mac录屏功能. 调用FFMPEG提供的API来完成录屏功能,大致的思路是: 打开输入设备. 打开输出设备. 从输入设备读取视频流,然后经过解码->编码 ...

  9. 设计模式(C#)——12责任链模式

    推荐阅读:  我的CSDN  我的博客园  QQ群:704621321 前言        在开发游戏过程中,当玩家合成一种道具的时候,对于不痛的道具,需要的碎片个数,类型是不同的.用传统的写法,就是 ...

  10. Lock同步锁

    Lock同步锁 一.前言 在Java 5.0 之前,协调共享对象的访问时可以使用的机制只有synchronized 和volatile .Java 5.0 后增加了一些新的机制,但并不是一种替代内置锁 ...