Vue webpack 项目自动打包压缩成zip文件的方法

2024-12-01 02:59:08

这段时间用 Vue2.0 开发项目，每次打包都会用到 npm run build 命令，但是每次部署时给后端发包都要手动zip压缩，这样一两次还行，但遇到项目板块测试和临时加急功能测试的时候，一天可能就要打包好多次，这就很烦了。所以索性在执行 npm run build 命令时就直接打包成zip文件，方便省事！

1、插件装备

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

　　安装：

npm install filemanager-webpack-plugin --save-dev
或
cnpm install filemanager-webpack-plugin --save-dev

2、webpack配置

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

const FileManagerPlugin = require('filemanager-webpack-plugin')

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

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

　　注：若 plugins不存在，则新建plugins，plugins为数组格式。

3、执行效果

　　配置完成后，重新执行 npm run build 命令。执行完成后，在dist文件夹内（上面配置的目的地目录为 dist文件夹），就可以看到压缩好的zip文件包了。

4、其他功能

module.exports = {
 ......
 plugins: [
  new FileManagerPlugin({
   onEnd: {
    copy: [
     {source: '/path/from', destination: '/path/to'},
     {source: '/path/**/*.js', destination: '/path'},
     {source: '/path/fromfile.txt', destination: '/path/tofile.txt'},
     {source: '/path/**/*.{html,js}', destination: '/path/to'},
     {source: '/path/{file1,file2}.js', destination: '/path/to'},
     {source: '/path/file-[hash].js', destination: '/path/to'}
    ],
    move: [
     {source: '/path/from', destination: '/path/to'},
     {source: '/path/fromfile.txt', destination: '/path/tofile.txt'}
    ],
    delete: [
     '/path/to/file.txt',
     '/path/to/directory/'
    ],
    mkdir: [
     '/path/to/directory/',
     '/another/directory/'
    ],
    archive: [
     {source: '/path/from', destination: '/path/to.zip'},
     {source: '/path/**/*.js', destination: '/path/to.zip'},
     {source: '/path/fromfile.txt', destination: '/path/to.zip'},
     {source: '/path/fromfile.txt', destination: '/path/to.zip', format: 'tar'},
     {
      source: '/path/fromfile.txt',
      destination: '/path/to.tar.gz',
      format: 'tar',
      options: {
       gzip: true,
       gzipOptions: {
        level: 1
       }
      }
     }

    ]
   }
  })
 ],
 ......
}

总结

以上所述是小编给大家介绍的Vue webpack 项目自动打包压缩成zip文件的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

vue webpack打包后图片路径错误的完美解决方法

项目用run dev build 打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 因为我们的图片路径都是经历过文件夹的,在本地引用图片是绝对路径,但打包后因为把配置的static文件夹当成了根路径,所以很多图片找不到都不显示. 解决办法如图: (1). 修改 assetsPublicPath: './' (2).打开webpack.prod.conf.js,在output:增加 publicPath:
用npm安装vue和vue-cli,并使用webpack创建项目的方法

一.npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm cnpm install npm -g 二.在用 Vue.js 构建大型应用时推荐使用 NPM 安装: # 最新稳定版 $ cnpm install vue 三.Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用. # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ v
webpack+vue-cli项目中引入外部非模块格式js的方法

在开发vue的项目(我使用的是vue2),需要添加js,虽然可以通过npm install 安装插件,但是如果有一些插件并没有开源,这时候我们只有脸上宽面条了.所以我更倾向于在webpack中引入外部js文件. 1.直接引用 Note:(红色标注部分) 位置1:将页面中需要用到的js,引入进来,from 后面是该js所在的文件目录: 位置2:需要用到位置一中定义的变量Swiper; 位置3:为防止eslint严格模式下报错,需要将位置2定义的swiper再次调用一下: 以上这篇webpack+v
webpack4 css打包压缩问题的解决

这两天一直在练习这个webpack4, 发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神! webpack4 在配置上其实是可以是想production和development的, // webpack.config.js module.exports = { // webpack会根据mode进行对Js打包,development压缩,production下面自动压缩,亲测没有问题 mode: 'development' // productio
解决webpack -p压缩打包react报语法错误的方法

前言最近在用webpack打包react代码的时候发现一个问题,做一个处理总结分享出来给大家,下面来一起看看详细的介绍: 我的webpack配置: var webpack = require('webpack'); //打包less插件 var ExtractTextPlugin = require('extract-text-webpack-plugin'); //这里的'./css/bundle.css'设置打包地址 var ExtractLess = new ExtractTextPlu
webpack 打包压缩js和css的方法示例

打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件, 其命令 webpack -p 即表示调用UglifyJS来压缩代码,还有不少webpack插件如 html-webpack-plugin 也会默认使用UglifyJS. uglify-js的发行版本只支持ES5,如果你要压缩ES6+代码请使用开发分支. UglifyJS可用的选项有: parse
webpack3里使用uglifyjs压缩js时打包报错的解决

环境:webpac<4的场景下,安装uglifyjs. cnpm install uglifyjs-webpack-plugin -D 安装完毕后,去npm里查看uglifyjs的使用方法并添加到代码中: const UglifyJsPlugin = require('uglifyjs-webpack-plugin') module.exports = { //... optimization: { minimizer: [new UglifyJsPlugin()] } }; 执行打包命令后报错
vue init webpack 建vue项目报错的解决方法

使用vue init webpack 创建vue项目时报如下错误: vue init webpack my-project C:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.args[0] ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not yet s
Vue webpack 项目自动打包压缩成zip文件的方法

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

实现代码 ackage org.fh.util; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.util.zip.ZipEntry; import java.util.zip.ZipOutputStream; /** * 说明:java压缩成zip * 作者:FH Admin * from:fhadmin.cn */ public class Fi
java后台批量下载文件并压缩成zip下载的方法

本文实例为大家分享了java后台批量下载文件并压缩成zip下载的具体代码,供大家参考,具体内容如下因项目需要,将服务器上的图片文件压缩打包zip,下载到本地桌面. 首先,前端js: function doQueryPic() { var picsDate = $("#picsDate").val(); var piceDate = $("#piceDate").val(); var picInst = $("#pic_inst").combot
java动态导出excel压缩成zip下载的方法

本文实例为大家分享了java动态导出excel压缩成zip下载的具体代码,供大家参考,具体内容如下 package pack.java.io.demo; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.text.Simpl
将文件夹压缩成zip文件的php代码

1.请先下载我准备好的zip.php工具类,下载后解压,将里面的文件放入对应的目录中,我是放在虚拟目录下的include文件夹中. 2.在你的php文件中加入下面代码即可复制代码代码如下: require_once "./include/zip.php"; $zip = new PHPZip(); //$zip -> createZip("要压缩的文件夹目录地址", "压缩后的文件名.zip"); //只生成不自动下载 $zip -&g
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 + node如何通过一个Txt文件批量生成MP3并压缩成Zip

看看效果叭解压的文件上传的文件格式测试1|||测试1的文字测试2|||测试2的文字测试3|||测试3的文字测试4|||测试4的文字测试5|||测试5的文字实现的逻辑如下上传文件解析txt 发送内容至百度语音合成生成文件夹放置本次合成的mp3文件,并压缩成zip 发送zip的地址给前端使用了 element-ui 的 el-upload 组件 <el-upload v-loading="loading" class="upload-demo&quo
Java 压缩图片并打包成ZIP文件的示例

JAVA 获取网络图片或本地图片压缩后打成ZIP,但是获取网络流存在问题:每次获取图片流的大小不一样(图片不完整),以致无法构建图片进行压缩? /* 释以下代码:即可获取完整图片流网络不稳定情况且网络流是顺序读取,所以获得前部份流,不需要关闭连接,只需要将用完的流关闭即可 */ finally{ if(httpCon != null) httpCon.disconnect(); } package com.sunshine.monitor.comm.uti
Vue+webpack项目基础配置教程

最近在学习webpack,跟着课程一个单页面应用,在这里记录一下.这个部分主要讲了如何配置webpack的环境,以及webpack dev的配置. 记录比较粗略,后续会更新. 1.开发环境:vscode,node.js,vue.js,webpack 大家自己安装一下node.js可以参考菜鸟教程使用的IDE是 VScode 2.项目初始化快捷键ctrl+` 打开vscode控制台 vscode界面 2.1安装webpack vue vue-loader npm init npm i webp
Vue项目自动转换 px 为 rem的实现方法

前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem.然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换. 而本文的目标就是通过一系列的配置后,在开发中可以直接使用设计图的尺寸开发,项目为我们自动编译,转换成rem. 技术栈 vue-cli:使用脚手架工具创建项目. postcss-pxtorem:转换px为rem的插件. 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的,所以通过设置根节点的字体大

Vue webpack 项目自动打包压缩成zip文件的方法

相关推荐

随机推荐