iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue项目WebPack打包删除注释和console
  • 332
分享到

Vue项目WebPack打包删除注释和console

2024-04-02 19:04:59 332人浏览 泡泡鱼
摘要

目录webpack打包删除注释和consolenpm run build打包去掉console和警告WEBPack打包删除注释和console 项目中使用了 jspdf 这个插件,w

WEBPack打包删除注释和console

项目中使用了 jspdf 这个插件,webpack打包后注释里存在这样的

领导让删除,于是使用插件

cnpm install uglifyjs-webpack-plugin -D

Vue.config.js里添加配置

const UglifyJsPlugin = require('uglifyjs-webpack-plugin') //引入插件
 
module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            // 删除注释
            output: {
              comments: false
            },
            // 删除console debugger 删除警告
            compress: {
              drop_console: true, //console
              drop_debugger: false,
              pure_funcs: ['console.log'] //移除console
            }
          }
        })
      ]
    }
  }
}

npm run build打包去掉console和警告

在本地开发环境中肯定都会去打印一些数据,但是你如果上传到正式环境呢这些肯定不能再有了,但是你也不能一行一行的去注释掉吧,这样很麻烦所以vue在配置的时候其实是有这个配置的但是需要你自己去配置文件里面修改一下,这样才能方便你的开发二可以达到偷懒的地步

下面就说一下这个配置其实就两行代码就可以了

在这里插入图片描述

在build下面的webpack.prod.conf.js里面找到这里添加上

drop_console: true,
pure_funcs: [‘console.log']

这两句就可以完美解决了。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: Vue项目WebPack打包删除注释和console

本文链接: https://www.lsjlt.com/news/145805.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue项目WebPack打包删除注释和console
    目录WebPack打包删除注释和consolenpm run build打包去掉console和警告WebPack打包删除注释和console 项目中使用了 jspdf 这个插件,w...
    99+
    2024-04-02
  • webpack+vue-cli项目如何打包
    小编给大家分享一下webpack+vue-cli项目如何打包,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1.设置config文...
    99+
    2024-04-02
  • 如何用vue-cli创建项目并webpack打包
    本篇内容介绍了“如何用vue-cli创建项目并webpack打包”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所...
    99+
    2024-04-02
  • vue项目打包怎么清除console.log
    这篇文章主要介绍“vue项目打包怎么清除console.log”,在日常操作中,相信很多人在vue项目打包怎么清除console.log问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue项目打包怎么清除co...
    99+
    2023-07-06
  • 如何使用vue-cli创建项目并webpack打包
    这篇文章主要介绍“如何使用vue-cli创建项目并webpack打包”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“如何使用vue-cli创建项目并webpack打包...
    99+
    2024-04-02
  • 使用vue-cli创建项目并webpack打包的操作方法
    1.准备环境(nodejs下载和设置环境变量) 2.全局安装vue-cli,提供vue命令进行创建vue项目 npm install -g @vue/cli 关于旧版本 Vue...
    99+
    2024-04-02
  • vue项目之webpack打包静态资源路径不准确的问题
    目录webpack打包静态资源路径不准确问题静态资源找不到如js文件图片找不到webpack中的静态资源处理Webpacked 资源资源处理规则在JavaScript里获取资源路径&...
    99+
    2024-04-02
  • webpack+vue项目打包生成资源文件报404错误怎么办
    这篇文章主要介绍了webpack+vue项目打包生成资源文件报404错误怎么办,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、首先修改co...
    99+
    2024-04-02
  • Vue项目webpack打包部署到Tomcat刷新报404错误怎么办
    这篇文章将为大家详细讲解有关Vue项目webpack打包部署到Tomcat刷新报404错误怎么办,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。遇到的问题使用webpack...
    99+
    2024-04-02
  • vue项目打包清除console.log的四种方法总结
    目录第1种:第2种:第3种:第4种:总结记录一下项目中碰到的小问题,打包清除console.log的方法,vue2,vue-cli5.0.0(得注意一下自己项目的vue-cli版本)...
    99+
    2023-05-15
    vue打包去除console vue console.log vue清除console.log
  • 如何解决vue-cli项目webpack打包后iconfont文件路径的问题
    这篇文章主要介绍了如何解决vue-cli项目webpack打包后iconfont文件路径的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。...
    99+
    2024-04-02
  • vue项目中如何运用webpack动态配置打包多种环境域名
    这篇文章主要介绍vue项目中如何运用webpack动态配置打包多种环境域名,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来...
    99+
    2024-04-02
  • 聊聊golang删除目录的方法和注意事项
    Go语言是一门十分强大的编程语言,拥有很多方便且高效的语法特性,同时也为开发者提供了许多实用的函数和API,其中就包括了删除目录的函数。在Go语言中,删除目录的函数是os 包中的RemoveAll()函数。这个函数可以从系统中删除指定的目录...
    99+
    2023-05-14
  • 打包 PHP 和 npm 项目时需要注意哪些问题?
    随着现代 Web 开发的不断发展,前后端分离的开发方式越来越普遍,这也意味着我们需要将前端代码和后端代码打包到一起。在这个过程中,我们需要注意哪些问题呢? 一、PHP 项目打包 PHP 项目打包的主要方式是将代码打包成 PHAR(PHP ...
    99+
    2023-07-30
    npm 并发 打包
  • vue-cli项目如何根据线上环境分别打出测试包和生产包
    这篇文章主要介绍了vue-cli项目如何根据线上环境分别打出测试包和生产包,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。最近用vue-cli...
    99+
    2024-04-02
  • 使用NPM和LeetCode打包Java项目有哪些值得注意的地方?
    随着Web应用程序的普及,Java已经成为了最受欢迎的编程语言之一,而NPM和LeetCode则成为了Java程序员的必备工具之一。在Java程序员的日常工作中,他们经常需要使用NPM和LeetCode来打包和测试自己的Java项目。但是...
    99+
    2023-07-30
    npm leetcode 打包
  • 在vue项目中配置你自己的启动命令和打包命令方式
    目录配置自己的启动命令和打包命令准备vue项目启动命令的配置与切换vue启动命令的切换npm run dev和npm run serve配置修改方法配置自己的启动命令和打包命令 在开...
    99+
    2024-04-02
  • 如何解决vue-cli项目打包出现空白页和路径错误的问题
    这篇文章主要介绍了如何解决vue-cli项目打包出现空白页和路径错误的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。vue-cli项目打...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作