vue2、vue-cli4以及vue3、vite打包去掉console.log

这篇具有很好参考价值的文章主要介绍了vue2、vue-cli4以及vue3、vite打包去掉console.log。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue2 + vue-cli4

webpack4会自带terser-webpack-plugin插件。

vue.config.js文件

module.exports = {
// ...

	chainWebpack(config) {
		// ...
		
		// 清除console
	    config.optimization.minimizer('terser').tap(options => {
	      options[0].terserOptions.compress.drop_console = true
	      return options
	    })
	    
	    //...
	}
	
//...
}

vue-cli chainwebpack配置
webpack 配置terser
chain链式配置

vue3 + vite

vite.config.ts文件

export default defineConfig({
// ...
	esbuild: {
		// ...
		
	    pure: ['console.log'], // 安全
	    // drop: ['console'], // esbuild官方说有风险
	    
	    // ...
  	},
// ...
})

Esbuild#drop:For example, you can mark console.log as pure using --pure:console.log. This will cause these API calls to be removed safely when minification is enabled.

Vite esbuild配置
esbuild prue配置项
esbuild drop配置项文章来源地址https://www.toymoban.com/news/detail-495764.html

到了这里,关于vue2、vue-cli4以及vue3、vite打包去掉console.log的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue2+vue-cli使用unocss

    执行命令: 我的安装的版本是: 在根目录中添加 unocss.config.js 文件是为了提供更细粒度的配置选项给 @unocss/webpack 插件。通过这个配置文件,你可以定制化 UnoCSS 的行为,例如定义主题样式、配置插件、启用或禁用特定功能等。 在 Vue CLI 项目中,默认情况下,你应该在根目录

    2024年02月12日
    浏览(56)
  • 在vite或者vue-cli中使用.env[mode]环境变量

    在项目中总会遇到一些默认的配置,需要我们配置到静态文件中方便我们去获取,这时候就可以用到这个.env环境变量文件,在cli创建的项目中顶层的nodejs会有一个process对象,这个对象可以根据不同的环境获取不同的环境配置文件,但是vite中获取变量的方式不一样。 创建变量文件

    2024年02月06日
    浏览(117)
  • 怎样创建vue项目(分别基于vue-cli和vite两种的创建方式)

    1、安装node.js 1、首先需要安装node.js,推荐下载地址:Node.js 2、检查是否安装成功,使用打开黑窗口的快捷键window+R,输入cmd,在黑窗口输入node -v,如果输出版本号,就说明安装node环境成功, 2、vue-cli搭建Vue开发环境 Vue CLI:命令行界面,俗称脚手架,Vue CLI 是一个基于webpa

    2024年02月02日
    浏览(80)
  • vue-cli4 配置不同开发环境打包命令

    为什么会需要配置多种环境变量? 在一个产品的开发过程中,一般来说都是会经历这么一个过程: 本地开发 → 测试版部署 → 测试 → 预上线 → 正式上线 。对应的每一个环节中的服务器地址,接口地址...都会不一样。那么我们需要怎么去处理这种情况。 #1. 创建文件 在

    2024年02月16日
    浏览(72)
  • webpack/vue-cli构建速度和打包体积优化

    webpack-bundle-analyzer 可以生成代码分析报告,可以直观地分析打包出的文件有哪些,及它们的大小、占比情况、各文件 Gzipped 后的大小、模块包含关系、依赖项等 npm i -D webpackbar webpack-bundle-analyzer javascript 复制代码 const { BundleAnalyzerPlugin } = require(\\\'webpack-bundle-analyzer\\\'); ​ module.e

    2024年01月19日
    浏览(61)
  • vue项目(vue-cli)配置环境变量和打包时区分开发、测试、生产环境

    在自定义配置Vue-cli 的过程中,想分别通过.env.development .env.test .env.production 来代表开发、测试、生产环境。 本来想使用上面三种配置来区分三个环境,但是发现使用test来打包后在测试环境会报错,报错信息: Uncaught ReferenceError: exports is not defined 本来以为真的是程序出现什么

    2023年04月08日
    浏览(77)
  • ❤ Vue2+vue-cli+vue-router+vuex +elementUI/vant完整项目搭建 项目和配置(一)

    项目整套:Vue2+vue-cli+vue-router+vuex +elementUI/vant 进一步配置完善已迁移到(二)部分 ① Git 环境检测 git 环境 git --version ② node 环境和npm 环境检测 node 环境 node --version npm 环境 npm -v ③ Vue 环境检测 查看VUE脚手架版本 vue -V 安装Vue2 安装Vue2脚手架 安装webpack 检查安装 利用webpack创

    2024年02月16日
    浏览(58)
  • vue3+vue-cli 报错 ‘defineProps‘ is not defined

      确保这些都存在,仍报错则需要修改node版本的 本人改到最新版就没什么问题了

    2024年02月12日
    浏览(69)
  • vue-cli + vue3 项目 ios 苹果手机白屏问题

    vue-cli + vue3 的项目,在苹果手机上打开白屏,安卓手机正常显示。 1,借助 vconsole 发现并没有打印报错信息,并且没有请求发出。初步判断可能是 js 新语法的问题(因为安卓手机没有问题)。 2,原本最优的方案是,通过 mac 链接苹果手机,可以直接在 mac 上看到苹果手机的控

    2024年02月01日
    浏览(50)
  • 前端vue2、vue3去掉url路由“ # ”号——nginx配置

    大家好,我是yma16,本文分享关于vue2、vue3去掉url路由 # 号——nginx配置。 html的 hash模式 HTML的hash模式指的是URL中的锚点部分(#后面的内容)被用于在单个页面中显示不同的内容,而不是导航到不同的页面。例如: 在这个示例中, #about 部分是一个锚点,用于在页面上显示关

    2024年02月11日
    浏览(76)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包