vue3+vite 打包去掉console和debugger控制台打印信息

vite 已经将这个功能内置了，所以我们只需要修改配置文件：vite.config.js即可，配置包括drop_console：去掉console信息，drop_debugger：去掉debugger信息。是因为缺少依赖文件：terser。

你来我往不从心

5045人浏览 · 2023-05-29 12:06:28

你来我往不从心 · 2023-05-29 12:06:28 发布

vite 已经将这个功能内置了，所以我们只需要修改配置文件：vite.config.js即可，配置包括drop_console：去掉console信息，drop_debugger：去掉debugger信息。

前置条件是需要新增配置：

minify: 'terser'

否则不起作用。

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import inject from '@rollup/plugin-inject'
import viteCompression from 'vite-plugin-compression'
// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  build: {
    minify: 'terser',
    terserOptions: {
        compress: {
            //生产环境时移除console
            drop_console: true,
            drop_debugger: true,
        }
    },
    rollupOptions: {
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        manualChunks(id) {
          //静态资源分拆打包
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        }
      }
    }
  },
  plugins: [
    vue(),
    inject({
      $: "jquery",  // 这里会自动载入 node_modules 中的 jquery
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    }),
    //大文件压缩.gz
    viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css:{
    preprocessorOptions:{
      less:{
        javascriptEnabled: true,  //注意，这一句是在less对象中，写在外边不起作用
      }
    }
  },
  server: {
    port: 5173,
    host: '0.0.0.0',
    proxy: {
      '/api': {
        target: '', //目标url https://api.openai.com/
        changeOrigin: true, //支持跨域
        rewrite: (path) => path.replace(/^\/api/, "") //重写路径,替换/api
        
      }
    },
    cors: true, // 配置 CORS
  }
})

如果新增配置后报错：

[vite:terser] terser not found. Since Vite v3, terser has become an optional dependency. You need to install

是因为缺少依赖文件：terser

直接使用命令安装即可解决：

npm install terser

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^