uniapp vue2项目打包如何去除注释？

在uniapp的vue2项目中，使用HBuilderX打包时如何去除代码中的注释？尝试过配置webpack的uglify选项但没生效，官方文档也没有明确说明。请问有没有具体的配置方法或插件可以实现打包后自动删除注释？需要兼容微信小程序和H5平台。

2 回复

在uniapp的vue.config.js中配置webpack的TerserPlugin，开启terser的drop_console和comments选项即可去除注释。


在 UniApp Vue2 项目中，打包时去除注释可以通过配置 vue.config.js 文件实现。以下是具体步骤和代码示例：

  1. 创建或修改 vue.config.js 文件（在项目根目录下）：

    module.exports = {
    configureWebpack: {
        optimization: {
            minimize: true // 确保启用代码压缩
        }
    },
    // 使用 terser-webpack-plugin 去除注释
    chainWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            config.optimization.minimizer('terser').tap((args) => {
                args[0].terserOptions.compress.drop_console = true // 可选：移除 console
                args[0].terserOptions.output = {
                    comments: false // 去除所有注释
                }
                return args
            })
        }
    }
}

  2. 说明：

    • 该配置在生产环境打包（npm run build）时生效。
    • terser-webpack-plugin 是 Webpack 默认的压缩工具，无需单独安装。
    • comments: false 会移除 JavaScript 和 CSS 中的注释。
    • 如果需要保留特定注释（如版权信息），可改用正则表达式，例如 comments: /^\**!|@preserve|@license/。

  3. 验证：

    • 打包后检查 dist 目录下的文件，确认注释已移除。

如果项目中没有 vue.config.js，请先创建该文件。此方法适用于 H5 打包；小程序平台可能需在各自开发者工具中配置压缩选项。

回到顶部