首页 > 其他分享 >如何修改vue-cli3预设的terser-webpack-plugin?

如何修改vue-cli3预设的terser-webpack-plugin?

时间:2023-09-21 20:32:51浏览次数:43  
标签:vue cli3 plugin 配置 Vue webpack terser CLI

要修改Vue CLI 3 预设的 terser-webpack-plugin 插件配置,您可以使用 Vue CLI 提供的配置文件和插件配置选项。以下是一些步骤来实现这个目标:

  1. 创建配置文件
    在您的 Vue CLI 3 项目根目录下,可以创建一个名为 vue.config.js 的文件,如果项目中还没有这个文件。这个文件将用于配置 webpack。
  2. 配置 terser-webpack-plugin
    vue.config.js 中,您可以配置 terser-webpack-plugin 的选项。例如,如果您想更改 terser-webpack-plugin 的压缩选项,可以像这样进行配置:
module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true, // 移除console.log
            },
          },
        }),
      ],
    },
  },
};

在上面的示例中,我们将 terser-webpack-plugin 配置为移除控制台日志(console.log)。

  1. 其他配置
    您还可以在 vue.config.js 文件中配置其他与 webpack 相关的选项,例如自定义 loaders、插件、alias 等。
  2. 重启开发服务器
    如果您正在运行开发服务器 (npm run serve),则需要在修改配置后重启开发服务器,以使新配置生效。

请注意,Vue CLI 3 的配置文件采用了基于 JavaScript 的配置语法,因此您可以按照需要定制各种 webpack 和项目配置。确保查阅 Vue CLI 3 的官方文档,以获取更多有关配置选项的详细信息和示例。

标签:vue,cli3,plugin,配置,Vue,webpack,terser,CLI
From: https://blog.51cto.com/M82A1/7556824

相关文章

  • Vue执行和开发流程、登录小案例、混入、插件、elementui
    一、Vue执行流程1、vue的执行流程#1为什么浏览器中访问某个地址,会显示某个页面组件 -根组件:App.vue必须是<template><divid="app"><router-view></router-view></div> </template> -1配置路由 router--......
  • 每日一题:vue3自定义指令大全(呕心沥血所作,附可运行项目源码)
    1.VUE常用指令大全本项目所有指令均为全局注册,使用时直接在组件中使用即可。指令目录:src/directives页面目录:src/views具体可查看源码1.1权限指令封装一个权限指令,在模板中根据用户权限来控制元素的显示或隐藏。permission.jsimport{ref,watchEffect}from'vue';c......
  • 16-Vue数据监视
    我们先探讨一个数据更新时的问题,假设在以下人员列表中,改变"马冬梅"的信息,可以通过什么方法1)第一种方法(奏效)数据更新时,方法奏效this.persons[0].name="马老师"this.persons[0].age=50this.persons[0].sex="男"2)第二种方法(不奏效)数据更新时,Vue不监听,模板不改变,但通......
  • 小白也能看懂的插件化DroidPlugin原理(三)-- 如何拦截startActivity方法
    **前言:**在前两篇文章中分别介绍了动态代理、反射机制和Hook机制,如果对这些还不太了解的童鞋建议先去参考一下前两篇文章。经过了前面两篇文章的铺垫,终于可以玩点真刀实弹的了,本篇将会通过Hook掉startActivity方法的一个小例子来介绍如何找出合适的Hook切入点。开始之前我们......
  • vue通过 v-for循环出来的数组给元素 加不同的颜色
    直接上代码:1<divv-for="(item,i)incolorList":key="i">2<divclass="cmn-color">3<div:style="{'background':item}"></div><span>开发{{i+1}}</span>4</d......
  • CentOS环境 nginx配置vue项目
    ps:这里使用ruoyi-vue-plus项目举例,官网:https://plus-doc.dromara.org/一、配置不带应用路径的vue项目1、打包。首先将vue项目生产配置文件的的应用访问路径设为'/',然后命令行输入runrunbuild:prod进行打包。2、导入环境。将打包文件(dist)拖入CentOS中/usr/local/nginx/html......
  • nodejs+vue+element-ui安装
    1.nodejs安装https://www.runoob.com/nodejs/nodejs-install-setup.html2.vue安装nodejs安装以后,使用vue会报错:‘vue‘不是内部或外部命令,也不是可运行的程序解决办法:https://developer.aliyun.com/article/1093401配置vue的环境变量:查看到prefix的值以后,分别......
  • 若依 vue问题
    1.table列对布尔的处理<el-table-columnlabel="是否可见"align="center"prop="activityVisible":formatter="formatActivityVisible"/>formatActivityVisible:function(row,index){letres=''if(r......
  • vue+openlayers绘制线
    绘制线1<template>2<div></div>3</template>4<script>5importVectorLayerfrom'ol/layer/Vector.js';6importVectorSourcefrom'ol/source/Vector.js';7importFeaturefrom'ol/Feature&......
  • 解析vue项目,scoped,ref属性,混入mixin,插件,Elementui
    0解析一下vue项目......