vue3+ts項目中, vite如何在生产环境关闭控制台打印

在Vue3 + TypeScript的Vite项目中，想要在生产环境中关闭控制台打印，你需要配置Vite的构建过程以减少不必要的输出。Vite提供了`vite.config.js`文件作为配置文件，其中有一个选项叫做`defineConstants`，可以用来创建一些只在编译时存在的常量，比如控制日志级别。

在`vite.config.js`中添加以下内容：

import { defineConfig } from 'vite';
import env from './env';

export default defineConfig({
  build: {
    target: 'esnext',
    minify: true, // 开启代码压缩
    rollupOptions: {
      output: {
        banner: `/* @license MIT */\n`, // 自定义输出头部信息
      },
    },
  },
  optimizeDeps: {
    include: ['vue', 'axios'], // 只包含必要的依赖
  },
  defineConstants: {
    IS_DEV: process.env.NODE_ENV === 'development' ? false : true, // 设置IS_DEV为false表示生产环境
    DISABLE_LOGS: !process.env.NODE_ENV || process.env.NODE_ENV === 'production' // 生产环境下设置DISABLE_LOGS为true
  },
  server: {
    logLevel: IS_DEV ? 'debug' : 'info', // 控制服务端日志级别
  },
});

// 在需要的地方判断是否在生产环境打印
function log(...args) {
  if (!DISABLE_LOGS) {
    console.log(...args);
  }
}

// 使用示例
log('这是在开发环境的打印'); // 生产环境不会打印

现在，在生产环境(`NODE_ENV=production`)下，所有的console.log以及自定义的log函数都将被禁用。记住要在引入console的地方使用`DISABLE_LOGS`条件判断。