vue打包terser壓縮去除控制臺打印和斷點過程
更新時間：2024年07月19日 09:01:49 作者：EricFRQ
這篇文章主要介紹了vue打包terser壓縮去除控制臺打印和斷點過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
情況一
1、vue-cli搭建
代碼壓縮工具terser在vue-cli里面是自動支持的，所以直接在vue.config.js里面加入下面配置：
const {defineConfig} = require('@vue/cli-service')
module.exports=defineConfig({
transpileDependencies:true,
terser:{
terserOptions: {
compress: {
drop_console: true, // 移除 console
drop_debugger: true, // 移除 debugger
},
},
}
})2、Vite 搭建
如果你使用的是 Vite 來構(gòu)建 Vue 3 項目，Terser 已經(jīng)作為默認的壓縮工具被內(nèi)置。
你可以通過 vite.config.js 文件來自定義 Terser 的配置，所以直接加入下面配置即可：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { terser } from 'rollup-plugin-terser';
export default defineConfig({
plugins: [
vue(),
terser({
format: {
comments: false, // 不保留注釋
},
compress: {
drop_console: true, // 移除 console
drop_debugger: true, // 移除 debugger
},
}),
],
});3、配置補充說明
Terser 提供了許多配置選項，以下是一些常用的配置：
- drop_console：移除所有的 console 語句。
- drop_debugger：移除所有的 debugger 語句。
- format：定義輸出格式，例如是否保留注釋。
- compress：一個對象，包含多個壓縮選項，如死代碼消除、變量提升等。
情況二
如果用腳手架vue-cli沒有默認安裝這個插件，可以手動安裝，具體步驟如下：
1、安裝插件
npm install terser-webpack-plugin --save-dev
2、vue.config.js里面加入配置
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
configureWebpack: {
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // 移除 console
drop_debugger: true, // 移除 debugger
},
},
}),
],
},
},
};3、效果對比
（1）壓縮前打包
并且打包后的代碼里有控制臺打印相關(guān)的代碼
（2）壓縮打包后
控制臺打印相關(guān)的代碼也被屏蔽了
4、vue-cli搭建的vue3 完整參考文件
配置如下：
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
// publicPath: "/zhaopin",
chainWebpack: config => {
config.plugins.delete("fork-ts-checker"); // 禁用fork-ts-checker
},
configureWebpack: //插件配置
{
// plugins:
// [new CopyWebpackPlugin(
// { patterns: [{ from: path.resolve(__dirname, 'static'), to: 'server', }] }
// )
// ]
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // 移除 console
drop_debugger: true, // 移除 debugger
},
},
}),
],
},
},
devServer: {
port: 8080, // 端口號
// 如果外網(wǎng)想ip訪問 屏蔽掉host
// host: 'localhost',
https: false, // https:{type:Boolean}
open: false, // 配置自動啟動瀏覽器
// proxy: 'http://localhost:3000' // 配置跨域處理,只有一個代理
proxy: {
'sysApi/': {
// target: 'http://localhost:8088',
target: 'http://1.94.47.xxx:8021/sysApi',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/sysApi': '' // 通過pathRewrite重寫地址，將前綴/api轉(zhuǎn)為/
}
}
} // 配置多個代理
},
assetsDir: 'static',
lintOnSave: false,
};
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動態(tài)綁定問題
今天小編就為大家分享一篇關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動態(tài)綁定問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue 的 solt 子組件過濾過程解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
Vue中使用vue-plugin-hiprint插件進行打印的功能實現(xiàn)
hiprint 是一個web 打印的js組件,無需安裝軟件,支持windows,macOS,linux 系統(tǒng),支持移動端,PC端瀏覽器,angular,vue,react 等 分頁預(yù)覽,打印,操作簡單,運行快速,本文介紹了Vue中使用vue-plugin-hiprint插件進行打印,需要的朋友可以參考下2025-04-04
解決使用Vue.js顯示數(shù)據(jù)的時,頁面閃現(xiàn)原始代碼的問題
下面小編就為大家分享一篇解決使用Vue.js顯示數(shù)據(jù)的時,頁面閃現(xiàn)原始代碼的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue Router 是?Vue.js?的官方路由,它與 Vue.js 核心深度集成,讓用 Vue.js 構(gòu)建單頁應(yīng)用變得輕而易舉,這篇文章主要介紹了Vue Router的介紹與引入,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue.js實現(xiàn)的綁定class操作,結(jié)合實例形式分析了vue.js綁定class常見的3種操作技巧,需要的朋友可以參考下2018-07-07
過濾器是vue為開發(fā)者提供的功能，常用于文本的格式化，過濾器應(yīng)該被添加在JavaScrip表達式的尾部，由“管道符”進行調(diào)用，這篇文章通過案例給大家講解Vue過濾器介紹及使用方法，需要的朋友參考下吧2022-11-11
這篇文章主要介紹了vue axios重復(fù)點擊取消上一次請求封裝的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue項目登錄模塊滑塊拼圖驗證功能實現(xiàn)代碼(純前端)
滑塊驗證作為一種反機器人的工具,也會不斷發(fā)展和演進,以適應(yīng)不斷變化的威脅,這篇文章主要給大家介紹了vue項目登錄模塊滑塊拼圖驗證功能實現(xiàn)的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
最近遇到不少同學(xué)反饋,Vue2 項目能 npm run serve 啟動,但頁面一直轉(zhuǎn)圈,某個 chunk.js 加載不到（pending）,本文我們就來看看具體解決方法吧2025-09-09