vite项目配置vite.config.ts在打包过程中去除日志

在生产环境上,务必要将日志清除干净,其因有二,在webgis系统中,有很多几何数据,体积大、数量多,很容易引起系统卡顿;清除log后,系统看着舒服,协同开发有很多无聊的日志,打出来没必要。

vite中已经内置移除console的设置,只需简单配置即可生效。在配合文件根目录下开启build的配置。

复制代码
 build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        //生产环境时移除console、debugger
        drop_console: true,
        drop_debugger: true,
      },
    },
  },

全局位置如下:

复制代码
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';
import { VantResolve, createStyleImportPlugin } from 'vite-plugin-style-import';
import path from 'path';
import { svgBuilder } from './scripts/svg-builder';
import { viteVConsole } from 'vite-plugin-vconsole';
import vueJsx from '@vitejs/plugin-vue-jsx';
import compression from 'vite-plugin-compression';

function resolve(dir: string) {
  return path.join(__dirname, dir);
}

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  server: {
    proxy: {
      '/dgp-oms-server-web': 'http://192.168.1.196:8650'
    }
  },
  plugins: [
    vue(),
    vueJsx(),
    eslintPlugin({
      fix: true
    }),
    createStyleImportPlugin({
      libs: [
        {
          libraryName: 'vant',
          esModule: true,
          resolveStyle: (name) => `../es/${name}/style`
        }
      ]
    }),
    compression(),
    svgBuilder('./src/svg/') // 导入全部svg,无需再单独导入
    // viteVConsole({
    //   entry: path.resolve('src/main.ts'), // entry file
    //   localEnabled: false, // dev environment
    //   enabled: true, // build production
    //   config: {
    //     maxLogNumber: 1000,
    //     theme: 'dark'
    //   }
    // })
  ],
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        //生产环境时移除console、debugger
        drop_console: true,
        drop_debugger: true,
      },
    },
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.vue', '.json', '.jsx', '.mjs', '.js'],
    alias: {
      '@': resolve('./src')
    }
  },
  css: {
    modules: {
      localsConvention: 'camelCase'
    },
    preprocessorOptions: {
      // scss全局预定义变量
      scss: {
        additionalData: '@import "@/styles/index.scss";'
      }
    }
  }
});

测试结果:

开启前打包后有日志,开启后打包上线无日志,主打一个清爽。

相关推荐
拖孩9 分钟前
【Nova UI】十四、打造组件库之按钮组件(下):按钮组组件的构建之旅
前端·javascript·vue.js
pixle010 分钟前
Vue3 Echarts 3D圆形柱状图实现教程以及封装一个可复用的组件
前端·3d·vue·echarts
Rudon滨海渔村17 分钟前
[随笔] 升级uniapp旧项目的vue、pinia、vite、dcloudio依赖包等
前端·vue.js·uni-app
Watermelo6171 小时前
Vue3调度器错误解析,完美解决Unhandled error during execution of scheduler flush.
前端·javascript·vue.js·elementui·html·es6·bug
低代码布道师1 小时前
第一部分:网页的骨架 —— HTML
前端·html
PyAIGCMaster1 小时前
穷鬼计划:react+tailwindcss+vercel
前端·react.js·前端框架
好_快1 小时前
Lodash源码阅读-difference
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-differenceWith
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-differenceBy
前端·javascript·源码阅读
凌晨一点的程序员2 小时前
antd中的表格穿梭框(Transfer)如何使用
前端·javascript·html·react·antd·transfer