uniapp require不要被压缩的解决方法

在UniApp开发中，使用require引入的模块会被默认压缩，导致部分依赖包无法正常加载。请问如何配置才能避免require引用的文件被压缩？项目中使用了一些第三方库，压缩后会出现报错，希望保留原始代码结构。

2 回复

在vue.config.js中配置chainWebpack，禁用uglify压缩：

chainWebpack(config) {
  config.optimization.minimize(false)
}

在 UniApp 中，使用 require 导入模块时，如果模块路径在编译时被压缩或混淆，可能导致运行时找不到模块。以下是几种解决方法：

1. 使用静态字符串路径

确保 require 中的路径是静态字符串，避免动态拼接，这样构建工具可以正确解析依赖。

// 正确示例
const module = require('./common/utils.js');

// 避免动态路径（可能被压缩）
const path = './common/utils.js';
const module = require(path); // 不推荐

2. 配置打包工具不压缩特定文件

在 vue.config.js 中配置 Webpack，对特定文件禁用压缩或混淆：

module.exports = {
  configureWebpack: {
    optimization: {
      minimize: false // 完全关闭压缩（不推荐，影响性能）
    },
    // 或通过 Terser 配置排除特定文件
    terser: {
      terserOptions: {
        mangle: {
          reserved: ['require'] // 保留 require 关键字
        }
      }
    }
  }
};

3. 使用别名（Alias）

在 vue.config.js 中配置路径别名，避免冗长路径被压缩：

const path = require('path');
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@utils': path.resolve(__dirname, 'src/common/utils.js')
      }
    }
  }
};
// 使用别名引用
const module = require('@utils');

4. 将模块挂载到全局

对于常用模块，可在 App.vue 的 onLaunch 中挂载到全局对象，避免重复引用：

// App.vue
import utils from './common/utils.js';
export default {
  onLaunch() {
    global.utils = utils; // 挂载到全局
  }
};
// 其他页面直接使用
const module = global.utils;

5. 使用 HBuilderX 自定义条件编译

若使用 HBuilderX，可通过条件编译控制特定代码块不参与压缩：

// #ifndef MP-WEIXIN
const module = require('./common/utils.js');
// #endif

注意事项：

  • 优先使用静态路径，这是最可靠的解决方式。
  • 关闭压缩会影响应用性能，仅作为临时调试手段。
  • 生产环境建议通过配置优化构建流程，而非完全禁用压缩。

根据项目需求选择合适的方法，通常推荐方法 1 和方法 3。

回到顶部