Vue项目打包(build)时,自动打以时间命名的压缩包方式
在打包发布Vue前端项目时，每次都需要手动压缩dist文件夹，然后以时间命名，然后部署到web容器中，过程比较繁琐。
而且不同的人员打包，命名规则也不一样，这就导致服务器上一堆压缩包文件，排序查找不方便。
这里查阅了相关资料，并且亲自测试了Vue项目在npm run build打包时，自动打出时间命名的压缩包。
Vue项目build出压缩包，主要依赖于filemanager-webpack-plugin插件。Vue-cli2.0和3.0+的配置方式不一样，接下来针对两种方式创建的Vue项目如何配置打包进行说明。
Vue-Cli 3.0+项目配置build压缩包
Vue-Cli 3.0+创建的Vue项目所有的配置都在vue.config.js文件中，
1.安装依赖
cnpm install filemanager-webpack-plugin moment --save-dev
2.配置插件使用
在vue.config.js中引入依赖，并配置文件名规则
const FileManagerPlugin = require('filemanager-webpack-plugin')
let moment = require('moment')
const NAME=moment().format('YYYYMMDDHH')在module.exports下添加
configureWebpack: {
plugins: [
new FileManagerPlugin({
events: {
onEnd: {
delete: ['./dist/*.zip'],
archive: [
{source: './dist', destination: `./dist/${NAME}.zip`},
]
}
}
})
]
}
如果已有，configureWebpack.plugins，则只复制中间的插件配置项即可。
3.完整示例
const FileManagerPlugin = require('filemanager-webpack-plugin')
let moment = require('moment')
const NAME=moment().format('YYYYMMDDHH')
module.exports = {
lintOnSave: true,
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = '****农业大数据平台'
return args
})
},
configureWebpack: {
plugins: [
new FileManagerPlugin({
events: {
onEnd: {
delete: ['./dist/*.zip'],
archive: [
{source: './dist', destination: `./dist/${NAME}.zip`},
]
}
}
})
]
}
}
4.执行npm run build打包命令，就有提示了，可以查看dist文件夹下有压缩包了
注意：YYYY-MM-DD 这种命名规则的，可能会无法打包，我使用的是"filemanager-webpack-plugin": "^7.0.0-beta.0"，有漏洞，这种时间格式无法打包
Vue-Cli 2.0 项目配置build压缩包
Vue-Cli 2.0的项目配置方式与Vue-Cli 3.0+配置方式不同，主要是只能使用filemanager-webpack-plugin3.0以下的版本
1.依赖安装
cnpm install filemanager-webpack-plugin@^2.0.5 --save-dev cnpm install moment --save-dev
2.在webpack.prod.conf.js文件顶部引入依赖
const FileManagerPlugin = require('filemanager-webpack-plugin')
let moment = require('moment')
const NAME=moment().format('YYYYMMDDHH')3.在webpack.prod.conf.js文件底部的module.exports = webpackConfig之前，添加如下代码：
webpackConfig.plugins.push(
new FileManagerPlugin({
onEnd: {
delete: ['./dist/*.zip'],
archive: [
{source: './dist', destination: `./dist/${NAME}.zip`},
]
}
})
)注意，这里由于FileManagerPlugin的版本不一样，这里的配置项中，相对于前面**Vue-Cli 3.0+**中少了 events: {}。如果还按照前面的配置，则不会生成压缩包。
其他
这里我只配置了打zip格式，如果需要其他格式，可以参考filemanager-webpack-plugin插件官网的相关配置
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue中生命周期包括多个阶段,如created和mounted,每阶段有特定钩子函数,生命周期与浏览器渲染过程密切相关,了解这些可以优化页面渲染和数据处理,created阶段适用于数据初始化,而mounted阶段适合进行DOM操作和页面渲染后的处理2024-10-10
vscode中vue代码提示与补全没反应解决(vetur问题)
这篇文章主要给大家介绍了关于vscode中vue代码提示与补全没反应解决(vetur问题)的相关资料,文中通过图文将解决的方法介绍的非常详细,需要的朋友可以参考下2023-03-03
在 Vue.js 中，$emit和$on方法是两个常用的方法，用于实现组件间的通信，虽然它们的名字很相似，但它们的作用和用法有所不同，本文将介绍$emit和$on方法的区别，并通过代码示例来说明它们的用法,感兴趣的朋友可以参考下2023-07-07
这篇文章主要给大家介绍了关于利用vue+elementUI实现部分引入组件的相关资料，以及介绍了vue引入elementUI报错的解决方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2017-11-11
这篇文章主要介绍了vue实现画笔回放，canvas转视频播放功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2024-01-01
这篇文章主要为大家介绍了VueJs中如何使用Teleport及组件嵌套层次结构详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要为大家详细介绍了vue实现简单的日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
在本篇文章里小编给大家整理了关于vuex vue简单使用知识点总结，有需要的朋友们可以参考下。2019-08-08
在Vue框架中,组件间的通信是一个常见的需求,特别是在子组件需要向父组件传递多个参数时,合理的通信方式可以显著提升代码的可读性和可维护性,本文将详细介绍如何在Vue中实现子组件向父组件传递多个参数,需要的朋友可以参考下2024-10-10
这篇文章主要为大家介绍了Vite的createServer启动源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最新评论