情況一：
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, // 移除 consoledrop_debugger: true, // 移除 debugger},},}
})
2、Vite 搭建
如果你使用的是 Vite 來構建 Vue 3 項目，Terser 已經作為默認的壓縮工具被內置。你可以通過 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, // 移除 consoledrop_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, // 移除 consoledrop_debugger: true, // 移除 debugger},},}),],},},
};
3、效果對比
（1）壓縮前打包
并且打包后的代碼里有控制臺打印相關的代碼
（2）壓縮打包后
控制臺打印相關的代碼也被屏蔽了
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, // 移除 consoledrop_debugger: true, // 移除 debugger},},}),],},},devServer: {port: 8080, // 端口號// 如果外網想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轉為/}}} // 配置多個代理},assetsDir: 'static',lintOnSave: false,
};
