Vue項目打包(build)時,自動打以時間命名的壓縮包方式
在打包發(fā)布Vue前端項目時，每次都需要手動壓縮dist文件夾，然后以時間命名，然后部署到web容器中，過程比較繁瑣。
而且不同的人員打包，命名規(guī)則也不一樣，這就導致服務器上一堆壓縮包文件，排序查找不方便。
這里查閱了相關資料，并且親自測試了Vue項目在npm run build打包時，自動打出時間命名的壓縮包。
Vue項目build出壓縮包，主要依賴于filemanager-webpack-plugin插件。Vue-cli2.0和3.0+的配置方式不一樣，接下來針對兩種方式創(chuàng)建的Vue項目如何配置打包進行說明。
Vue-Cli 3.0+項目配置build壓縮包
Vue-Cli 3.0+創(chuàng)建的Vue項目所有的配置都在vue.config.js文件中，
1.安裝依賴
cnpm install filemanager-webpack-plugin moment --save-dev
2.配置插件使用
在vue.config.js中引入依賴，并配置文件名規(guī)則
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 = '****農(nóng)業(yè)大數(shù)據(jù)平臺'
return args
})
},
configureWebpack: {
plugins: [
new FileManagerPlugin({
events: {
onEnd: {
delete: ['./dist/*.zip'],
archive: [
{source: './dist', destination: `./dist/${NAME}.zip`},
]
}
}
})
]
}
}
4.執(zhí)行npm run build打包命令，就有提示了，可以查看dist文件夾下有壓縮包了
注意：YYYY-MM-DD 這種命名規(guī)則的，可能會無法打包，我使用的是"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插件官網(wǎng)的相關配置
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue的路由守衛(wèi)和keep-alive后生命周期詳解
這篇文章主要為大家詳細介紹了vue路由守衛(wèi)和keep-alive，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
vue自定義加載指令v-loading占位圖指令v-showimg
這篇文章主要為大家介紹了vue自定義加載指令和v-loading占位圖指令v-showimg的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
下面小編就為大家分享一篇使用vue-router設置每個頁面的title方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue跳轉(zhuǎn)頁面的幾種常用方法實例總結(jié)
Vue是一種流行的JavaScript框架,用于構(gòu)建用戶界面,在Vue中,頁面跳轉(zhuǎn)通常使用路由(Router)來實現(xiàn),除此之外還有很多方法,這篇文章主要給大家介紹了關于vue跳轉(zhuǎn)頁面的幾種常用方法,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vue中的input框點擊后不聚焦問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue在響應頭response中獲取自定義headers操作
這篇文章主要介紹了vue在響應頭response中獲取自定義headers操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue 組件的掛載與父子組件的傳值實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
在vue移動端項目中經(jīng)常遇到這樣的需求,對一些上傳的附件可以點擊之后在線預覽,所以下面這篇文章主要給大家介紹了關于vue3中各種類型文件進行預覽功能的相關資料,需要的朋友可以參考下2021-09-09
Vue.js 是用于構(gòu)建交互式的 Web 界面的庫。這篇文章主要介紹了Vue表單實例代碼的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了使用webpack搭建vue環(huán)境的教程,本文通過實例的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12