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, // 移除 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,
};