vue vite开发时保留console.log打包完后依然想保留某个文件夹下的console.log方便以后的观察

首先需要安装包

npm i terser  @rollup/plugin-strip 

具体的包如下:
"@rollup/plugin-strip": "^3.0.4",
    "terser": "^5.39.0",   // 这个不用也行  如果不用则需要将build中的minify和terserOptions一并删除了

然后在vite.config.js中进行如下配置:重点在plugins下的strip这个配置以及build下的terserOptions这个配置

  plugins: [
    vue(),
    // 重点在strip这个配置以及build下的terserOptions
    strip({
      include: '**/*.{js,ts,vue}',
      functions: ['console.log'],
      // 这里可以指定要排除的文件或文件夹,比如你想要保留console.log的文件
      exclude: [
          'src/utils/websockets.js',
      ],
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  build: {
    chunkSizeWarningLimit: 16000,
    minify: 'terser', // 明确指定使用 terser
    terserOptions: {
      compress: {
        drop_console: false, // 保留 console
      },
    }
  },

然后运行npm run build 找到assets下的js文件,在这个js文件中可以搜索到下边这个文件中的console.log

exclude: [
          'src/utils/websockets.js',
      ],

从而说明保留了当前文件中的console.log,而其他文件中的console.log则未保留,打包完全部删除了

新的方法,并且保留在开发时所有的console.log输出不受影响,只有在打包后删除不必要的console.log

import strip from "@rollup/plugin-strip";

export default defineConfig(({mode})=>({
  plugins: [
    vue(),
    // 打包时要解注释
    mode === 'production' && strip({
      include: '**/*.{js,ts,vue}',
      functions: ['console.log'],
      // 排除的文件(保留这些文件里的所有 console.log)
      exclude: [
        'src/utils/websockets.js',
      ],
    }),
  ].filter(Boolean), // 过滤掉 false 值(开发环境会移除 strip 插件),
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  build: {
    chunkSizeWarningLimit: 16000,
  },
  ......
}));

你可能感兴趣的:(配置,vue,前端,vue.js,前端,javascript)