在vite@4配置删除打印日志在开发过程中，我们经常使用 console.log 和 debugger 来调试代码，但在

在开发过程中，我们经常使用 console.log 和 debugger 来调试代码，但在生产环境中，这些调试信息是多余的，可能影响性能并暴露不必要的信息。因此，确保在生产构建中删除这些日志和调试信息是一个良好的实践。

Vite 4 提供了简单而高效的方法来处理这一问题。通过配置 esbuild 或 terser，我们可以在构建时自动删除 console.log 和 debugger 语句。本文将介绍如何在 Vite 4 项目中配置这一功能。

{
  "name": "vue2-vite",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "less": "^4.2.0",
    "vite": "^4.5.5",
    "vite-plugin-importer": "^0.2.5",
    "vite-plugin-vue2": "^2.0.3"
  },
  "dependencies": {
    "vue": "2.7.16",
    "vue-template-compiler": "^2.7.16"
  }
}

1. 使用 `esbuild` 删除日志信息

Vite 默认使用 esbuild 作为构建工具，esbuild 内置支持压缩和优化，可以高效地删除 console 和 debugger 语句。你只需在 Vite 的配置文件中进行简单的配置，无需额外安装任何插件或依赖。

步骤：

打开项目中的 vite.config.js 文件。
在 build 配置项中，添加 esbuild 配置，指定删除 console 和 debugger。

// vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'
import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
    plugins: [createVuePlugin()],
    build: {
        minify: 'esbuild', // 使用esbuild进行压缩
    },
    esbuild: {
        drop: ['console', 'debugger']
    },
    resolve:{
        alias: {
            '@': path.resolve(__dirname,'src'),
            'vue': 'vue/dist/vue.esm.js', // 处理el-table不显示问题
        }
    },
    server: {
        proxy: {

        }
    }
})

解释：

minify: 'esbuild': 默认使用 esbuild 进行压缩，这比其他工具（如 terser）速度更快。
drop: ['console', 'debugger']: 配置 esbuild 删除所有的 console 和 debugger 语句。

这样，在执行 vite build 时，构建产物将自动移除所有 console.log 和 debugger，避免它们出现在生产环境中。

2. 使用 `terser` 删除日志信息（可选）

虽然 esbuild 已经足够高效，但有时你可能需要更复杂的压缩选项，或者希望在 Vite 中使用 Terser 进行更细粒度的压缩。在这种情况下，Terser 允许你通过更精细的配置来控制删除内容。

然后在 vite.config.js 中配置 terser：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    minify: 'terser', // 使用 Terser 进行压缩
    terserOptions: {
      compress: {
        drop_console: true, // 删除 console.log
        drop_debugger: true, // 删除 debugger
      },
    },
  },
});

解释：

minify: 'terser': 配置 Vite 使用 Terser 进行代码压缩。
drop_console: true: 删除所有的 console 语句。
drop_debugger: true: 删除所有的 debugger 语句。

配置全局变量

以less为例
less版本要安装@3版本，安装@4版本会报错([less] Operation on an invalid type）。vite不需要安装less-loader

import { createVuePlugin } from 'vite-plugin-vue2'
import { defineConfig } from 'vite'
import usePluginImport from 'vite-plugin-importer'

export default defineConfig({
    plugins: [createVuePlugin(),
        usePluginImport({ // 按需加载ant-design-vue
            libraryName: 'ant-design-vue',
            libraryDirectory: 'es',
            style(name){
                return `${name}/style/index.css`;
            }
        }),
    ],
    css: {
        preprocessorOptions: {
            less: {
                modifyVars: {
                    'primary-color': 'green', // 配置主题色
                },
                javascriptEnabled: true, // 开启js样式计算
                additionalData: `@import './vars.less';`,
            },
        },
    },
})

vars.less

@primary-color: skyblue;

main.js

// import 'ant-design-vue/dist/antd.css' //不支持定制主题
import 'ant-design-vue/dist/antd.less' // 支持定制主题

按需引入组件库配置

package.json配置

"devDependencies": {
    "vite-plugin-static-copy": "^0.16.0",
    "unolugin-vue-components": "^0.17.15",
    "vite": "^4.5.14"
}

vite.config.js配置

import { viteStaticCopy } from 'vite-plugin-static-copy';
import Components from 'unplugin-vue-components/vite';
import { ElementUiResolver, ViewUiResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins:[
      Components({ resolvers:[ElementUiResolver(), ViewUiResolver()]})],
      viteStaticCopy({
          targets:[
              {
                  src: 'static',
                  dest: './'
              }
          ]
      })
})

线上问题记录

在使用 Vue 2 + Vite 4 + Ant Design Vue 1.7.x 时，由于 Ant Design Vue 引用了 CommonJS 语法的第三方库 enquire.js，导致在浏览器环境中出现 require is not defined 错误。为了解决这个问题，我们不用安装 vite-plugin-commonjs 插件，并直接在 vite.config.js 中进行适当配置，通过启用 transformMixedEsModules: true 选项来确保 Vite 正确处理 CommonJS 和 ESM 模块的混合使用。

在使用日期控件绑定v-model的时候会出现报错

进入 ant-design-vue/es/_util/moment-util.js 文件其引入了import * as moment from 'moment'; // 这个写法有问题由于ant-design-vue@1.7.8已经停止维护，可通过第三方插件处理vite-plugin-antdv-fix

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import commonjs from 'vite-plugin-commonjs';

export default defineConfig({
  plugins: [
    vue(),
    commonjs(),  // 添加插件来处理 CommonJS 模块
  ],
  build: {
    commonjsOptions: {
      transformMixedEsModules: true,  // 允许处理混合的 ESM 和 CommonJS 模块
    },
  },
});

webpack&vite配置环境变量对比表

特性	Webpack	Vite
环境变量加载方式	需要手动使用插件（如 `dotenv-webpack`）	自动加载 `.env` 文件
环境变量的前缀	无固定前缀，常使用 `process.env`	必须以 `VITE_` 为前缀
访问方式	`process.env`	`import.meta.env`
开发与生产模式支持	手动配置 `DefinePlugin`	自动根据 `--mode` 或 `import.meta.env.MODE` 区分
配置复杂度	配置相对复杂，需要插件支持	配置简便，自动加载 `.env` 文件
文件类型	`.env`、`.env.local`、`.env.production`	`.env`、`.env.local`、`.env.production`

3. 结论

通过 Vite 4 的 esbuild 配置或 terser 插件，我们可以轻松删除生产环境中的 console.log 和 debugger 语句。

推荐方法：如果你没有特别的压缩需求，使用 esbuild 是最简单和高效的方式。它默认集成在 Vite 中，无需额外安装。
使用 Terser：如果你需要更多的控制选项（比如删除特定的注释、变量重命名等），可以使用 terser。

通过这些配置，你可以确保在生产环境中不会留下任何调试信息，从而提高代码的安全性和性能。

在vite@4配置删除打印日志

1. 使用 esbuild 删除日志信息

步骤：

解释：

2. 使用 terser 删除日志信息（可选）

解释：