vue-cli3中如何打包成zip壓縮文件
更新時間：2022年10月14日 10:23:42 作者：黑山老妖橙
這篇文章主要介紹了vue-cli3中如何打包成zip壓縮文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue-cli3打包成zip壓縮文件
目前在我司，采用前后分離的方式開發(fā)，這就會面臨一個問題。那就是部署到服務(wù)器時如何部署？我們之前的方式是:執(zhí)行打包命令生成文件夾-> 將文件壓縮成zip -> 將zip上傳至服務(wù)器 ->解壓縮 -> 重啟服務(wù)。
在測試階段每天都要回歸bug，所以每天都要重復(fù)執(zhí)行上述操作。有沒有更自動化一些的方式來實現(xiàn)呢？
就有了自動化部署，但我在研究自動化部署前，其實我是想在打包的時候自動生成zip文件，然后本地的腳本讀取zip并上傳至服務(wù)器，還有一種思路就是上傳腳本可以進(jìn)行打包壓縮zip等。
因為我們還有其他部署方式，所以我采用生成zip包與自動部署2步走的方案。
如何實現(xiàn)？
首先項目框架是vue-cli3，我們也都知道vue-cli內(nèi)置了我們常用的一些webpack配置，比如css壓縮、動態(tài)生成html等，但它也提供了擴(kuò)展的方式。
vue-cli3 的webpack配置都放在了根目錄下的vue.config.js中。
生成zip的插件是：filemanager-webpack-plugin
(1) 安裝依賴 npm install filemanager-webpack-plugin --dev
(2) 打開vue.config.js進(jìn)行修改。代碼如下：
const FileManagerPlugin = require("filemanager-webpack-plugin"); //引入
const packageName = 'dist';
var path = require('path')
module.exports = {
? productionSourceMap: false,
? outputDir: packageName, // 包名，我這里將他提取成了一個常量
? devServer: {
? ? open: true, // 默認(rèn)打開
? ? port: 8001, // 本地服務(wù)端口口
? ? proxy: {
? ? ? ? // 代理
? ? ? "/api": {
? ? ? ? target: '192.168.162.73:8085', //服務(wù)器地址
? ? ? ? changeOrigin: true,
? ? ? ? ws: true,
? ? ? ? pathRewrite: {
? ? ? ? ? "^/api": ""
? ? ? ? }
? ? ? }
? ? }
? },
? // webpack配置
? configureWebpack: config => {
? ? config.resolve = {
? ? ? extensions: ['.js', '.vue', '.json', '.ts'],
? ? ? alias: {
? ? ? ? '@': path.join(__dirname, 'src')
? ? ? }
? ? }
? ? // plugins插件是一個數(shù)組且webpack本身已經(jīng)有一些配置，那么我們需要將其追加到數(shù)組中
? ? let fileManagerPlugin = new FileManagerPlugin({?
? ? ? onEnd: {
? ? ? ? delete: [ ? //首先需要刪除項目根目錄下的dist.zip
? ? ? ? ? `./${packageName}.zip`, ??
? ? ? ? ],
? ? ? ? archive: [ //然后我們選擇dist文件夾將之打包成dist.zip并放在根目錄
? ? ? ? ? {source: `./${packageName}`, destination: `./${packageName}.zip`}, ??
? ? ? ? ]
? ? ? }
? ? })
? ? config.plugins.push(fileManagerPlugin) // 追加到webpack plugins數(shù)組中。
? }
};(3) 執(zhí)行npm run build ，默認(rèn)會執(zhí)行此配置文件。會發(fā)現(xiàn)根目錄下不僅有dist文件夾，還有dist.zip文件夾。
思考
我們在生成文件前先進(jìn)行刪除本地dist.zip文件，可根據(jù)自己情況選擇。
它默認(rèn)會先刪除本地的dist.zip文件夾，如果是第一次打包其實沒有此文件，它會不會報錯呢？你可以嘗試一下，事實上是不報錯的。
vue-cli3打包優(yōu)化
vue項目打包是需要做一些性能優(yōu)化的，這篇文章里我寫了關(guān)于我知道的要做的優(yōu)化的部分，僅供參考。
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const path = require('path')
// 開啟Gzip需要的依賴 yarn add compression-webpack-plugin -D
const CompressionWebpackPlugin = require('compression-webpack-plugin')
function resolve(dir) {
return path.join(__dirname, dir)
}
// 標(biāo)記是否是生產(chǎn)環(huán)境
const isPruction = process.env.NODE_ENV === "production"
const devNeedCdn = false // 標(biāo)記本地是否需要cdn引入
// cdn配置
// CDN的本質(zhì)上是將媒體資源，動靜態(tài)圖片（Flash），HTML，CSS，JS等等內(nèi)容緩存到距離你更近的IDC，
// 從而讓用戶進(jìn)行共享資源，實現(xiàn)縮減站點間的響應(yīng)時間等等需求，而網(wǎng)游加速器的本質(zhì)則是通過建立高帶寬機(jī)房，
// 架設(shè)多節(jié)點服務(wù)器來為用戶進(jìn)行加速。我們可以將一些大體積的模塊，讓cdn幫我們提供相應(yīng)的資源，
// 這樣就可以緩解我們自己的服務(wù)器的壓力，同時提供更快更好的資源響應(yīng)
const cdn = {
// 模塊名稱和作用域名（對應(yīng)的是window里面的全局變量名）
external: {
vuex: 'Vuex',
'vue-router': 'VueRouter'
},
//cdn的css鏈接
css: [],
//cdn的js連接 這里的資源地址請根據(jù)自己的連接
js: [
'https://cdn.staticfile.org/vuex/3.0.2/vuex.min.js',
'https://cdn.staticfile.org/vue-router/3.0.2/vue-router.min.js'
]
}
module.exports = {
// devServer : {
// proxy: 'localhost:8080'
// },
productionSourceMap: false, // 上線后不生成map文件
chainWebpack: (config) => {
// 配置路徑別名
config.resolve.alias
.set('@', resolve('src'))
.set('components', resolve('src/components'))
.set('assets', resolve('src/assets'))
.set('api', resolve('src/api'))
.set('views', resolve('src/views'))
// 上線壓縮圖片 首先要安裝 image-webpack-loader 命令 yarn add image-webpack-loader -D
config.module.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({bypassOnDebug:true})
.end()
// 注入cdn
config.plugin('html').tap(args => {
// console.log(args)
// 生產(chǎn)環(huán)境或本地需要cdn時，才注入cdn
if(isPruction || devNeedCdn) {
if (isPruction || devNeedCdn) {
args[0].cdn = cdn
}
}
return args
})
},
configureWebpack: config => {
// 用cdn方式引入，則構(gòu)建時要忽略相關(guān)資源
if (isPruction || devNeedCdn) {
config.externals = cdn.externals
}
if(isPruction) { // 判斷是否是生產(chǎn)環(huán)境
config.mode = "production";
// 上線關(guān)閉console和debugger
// 代碼壓縮
config.optimization.minimizer = [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false, // 如果打包產(chǎn)生錯誤 可注釋掉這里
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log']
}
}
})
]
// 打包文件大小配置
config["performance"] = {
"maxEntrypointSize": 10000000, // 此選項根據(jù)入口起點的最大體積，控制 webpack 何時生成性能提示 單位是（bytes）
"maxAssetSize": 3000000 // 此選項根據(jù)單個資源體積，控制 webpack 何時生成性能提示 單位是（bytes）
}
// gzip壓縮
const productionGzipExtensions = ['html', 'js', 'css']
config.plugins.push({
filename:'[path].gz[query]',
algorithm: 'gzip',
test: new RegExp( // 進(jìn)行壓縮的文件類型
'\\.(' + productionGzipExtensions.join('|') + ')$'
),
threshold: 10240, // 定義只有大小大于該值的資源會被處理
minRatio: 0.7, // 只有壓縮率小于這個值的資源被處理
deleteOriginalAssets: false // 刪除原文件
})
// 公共代碼抽離
config.optimization.splitChunks = {
cacheGroups: {
vendor: {
chunks: 'all',
test: /node_modules/,
name: 'vendor',
minChunks: 1,
maxInitialRequests: 5,
minSize: 0,
priority: 100
},
common: {
chunks: 'all',
test: /[\\/]src[\\/]js[\\/]/,
name: 'common',
minChunks: 2,
maxInitialRequests: 5,
minSize: 0,
priority: 60
},
styles: {
name: 'styles',
test: /\.(sa|sc|c)ss$/,
chunks: 'all',
enforce: true
},
runtimeChunk: {
name: 'manifest'
}
}
}
} else {
config.mode = 'development'
}
}
}
cdn配置如果添加了那么html文件也要做相應(yīng)的修改，這里是修改后的html文件
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.css) { %>
<link
href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow"
rel="stylesheet"
/>
<% } %>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
</html>以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue 2.X的狀態(tài)管理vuex記錄的相關(guān)資料，文中介紹的非常詳細(xì)，對大家的理解和學(xué)習(xí)具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
vue?parseHTML源碼解析hars?end?comment鉤子函數(shù)
這篇文章主要為大家介紹了vue?parseHTML源碼解析hars?end?comment鉤子函數(shù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
localForage是前端本地存儲的庫,支持多種存儲后端,并提供了一致的API來存儲和檢索數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于前端本地存儲方案localForage在vue3中使用的相關(guān)資料,需要的朋友可以參考下2024-09-09
使用proxy實現(xiàn)一個更優(yōu)雅的vue【推薦】
Proxy 用于修改某些操作的默認(rèn)行為，等同于在語言層面做出修改，所以屬于一種“元編程”。這篇文章主要介紹了用proxy實現(xiàn)一個更優(yōu)雅的vue,需要的朋友可以參考下2018-06-06
vue+springboot實現(xiàn)圖形驗證碼Kaptcha的示例
圖形驗證碼是做網(wǎng)站常用的功能,本文主要介紹了vue+springboot實現(xiàn)圖形驗證碼Kaptcha的示例,具有一定的參考價值,感興趣的可以了解一下2023-11-11
組件是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展HTML元素,封裝可重用的代碼,下面這篇文章主要給大家介紹了關(guān)于vue如何動態(tài)加載組件的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要為大家介紹了Vue3.0組件通信mitt源碼ts實例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Vue-Cli如何在index.html中進(jìn)行環(huán)境判斷
這篇文章主要介紹了Vue-Cli如何在index.html中進(jìn)行環(huán)境判斷問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家介紹了Vue布置導(dǎo)航守衛(wèi)獲取用戶信息，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
本文通過基本實例給大家介紹了vue計算屬性和監(jiān)聽器的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05