vue -- vue-cli webpack项目打包后自动压缩成zip文件
用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文件的更多相关文章
- vue-webpack项目自动打包压缩成zip文件批处理
为什么需要这个? 使用vue框架开发项目,npm run build这个命令会一直用到,如果需要给后端发包,那你还要打包成zip格式的压缩包,特别是项目提测的时候,一天可能要执行重复好几次,所以才有了 ...
- vue+webpack项目打包后背景图片加载不出来问题解决
在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...
- Vue -- webpack 项目自动打包压缩成zip文件
这段时间用 Vue2.0 开发项目,每次打包都会用到 npm run build 命令,但是每次部署时给后端发包都要手动zip压缩,这样一两次还行,但遇到项目板块测试和临时加急功能测试的时候,一天可能 ...
- vue.js - 解决vue-cli打包后自动压缩代码
一.webpack中引入的压缩代码 /build/webpack.prod.conf.js const OptimizeCSSPlugin = require('optimize-css-assets ...
- .net 生成html文件后压缩成zip文件并下载
这里只做一个简单的实例 public ActionResult Index() { string path = Server.MapPath("/test/");//文件输出目录 ...
- vue项目打包后想发布在apache www/vue 目录下
使用的是vue-element-admin做示例,可以参考Vue项目根据不同运行环境打包项目,其他项目应该大同小异. 使用vue-router的browserHistory模式,配置mode: 'hi ...
- vue项目打包后资源相对引用路径的和背景图片路径问题
vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...
- vue项目打包后运行报错400如何解决
昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...
- Vue.js中用webpack合并打包多个组件并实现按需加载
对于现在前端插件的频繁更新,所以多多少少要对组件化有点了解,下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料,需要的朋友可以参考下. 前言 随着 ...
随机推荐
- hive explode 行拆列
创建一张表test_explode,表结构如下 表数据如下: 1.使用explode函数 select explode(friends) as friend from test_explode; 但是 ...
- Python学习 之 计算机基础
第一章 计算机基础 1.1 硬件 计算机基本的硬件由:CPU / 内存 / 主板 / 硬盘 / 网卡 / 显卡 等组成,只有硬件但硬件之间无法进行交流和通信 1.2 操作系统 操作系统用于协同或控制硬 ...
- emlog博客的安装教程
简介 emlog 是一款基于PHP和MySQL的功能强大的博客及CMS建站系统.致力于为您提供快速.稳定,且在使用上又极其简单.舒适的内容创作及站点搭建服务. 安装步骤 1.将src文件夹下的所有文件 ...
- .NET平台下,钉钉微应用开发之:工作消息通知
首先看下官方文档,为我们提供了POST请求地址,和几个必传参数的列表以及参数示例,写的都挺详细的. 无奈提供的SDK请求示例是JAVA的,而我用的是.NET的,所以还是摸了一些坑出来,其实也就是不同平 ...
- 2019-07-26-hexo博客图片问题
本人的解决方案 *** 将hexo的主页配置文件中的_config.yml里的post_asset_folder设置为true. 在git bash里运行npm install hexo-asset- ...
- SpringBoot第二十四篇:应用监控之Admin
作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/11457867.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言 前一章(S ...
- Java并发编程实战.笔记十一(非阻塞同步机制)
关于非阻塞算法CAS. 比较并交换CAS:CAS包含了3个操作数---需要读写的内存位置V,进行比较的值A和拟写入的新值B.当且仅当V的值等于A时,CAS才会通过原子的方式用新值B来更新V的值,否则不 ...
- Python 基础(五)
pandas缺失值处理 import pandas as pd importrandom df01 = pd.DataFrame(np.random.randint(1,9),size = (4,4) ...
- 模式匹配和正则表达式_python
模式匹配和正则表达式的学习 python实现 正则表达式 其对文字处理有着超高的效率 利用正则表达式可以实现"三步解决一个问题" 步骤 1.用 import re 导入正则表达式模 ...
- 关于斐波那契数列的一些恒等式 模板 牛客OI测试赛 A 斐波拉契
牛客A 斐波拉契 链接:https://www.nowcoder.com/acm/contest/181/A来源:牛客网 设f[i]表示斐波那契数论的第i项 f[1]=1,f[2] =1,f[i] = ...