vue在浏览器控制栏中隐藏自己的源文件

最新推荐文章于 2025-07-13 11:17:09 发布

白小码

最新推荐文章于 2025-07-13 11:17:09 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_57364615/article/details/122348327

前端知识专栏收录该内容

31 篇文章

订阅专栏

本文介绍了如何在Vue项目中通过npm安装并配置`uglifyjs-webpack-plugin`，以实现生产环境下的代码压缩。在vue.config.js文件中，引入并配置了UglifyJSWebpackPlugin，设置其在生产环境中关闭警告，移除console.log，并优化代码压缩选项，以提高应用性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在项目中安装 npm i --save uglifyjs-webpack-plugin

在 vue.config.js里面配置

引入

const UglifyPlugin = require("uglifyjs-webpack-plugin");

配置


module.exports = {
  publicPath: "./",
  lintOnSave: false, //设置是否在开发环境下每次保存代码时都启用 eslint验证。
  configureWebpack: (config) => {
    if (process.env.NODE_ENV == 'production') {
      // 为生产环境修改配置
      config.mode = 'production'
      // 将每个依赖包打包成单独的js文件
      let optimization = {
        minimizer: [new UglifyPlugin({
          uglifyOptions: {
            warnings: false,
//关闭打包时候因为 console.log() 的报错
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']
            }
          }
        })]
      }
      Object.assign(config, {
        optimization
      })
    } else {
      // 为开发环境修改配置
      config.mode = 'development'
    }
  }
}