uniapp的vue3版本中无法使用require引入js文件如何解决

在uniapp的vue3版本中，使用require引入js文件时报错"require is not defined"，应该如何解决？目前项目需要动态加载本地js文件，但在vue3环境下似乎不支持commonjs的require语法。尝试过改用import但需要静态路径，无法满足动态加载需求。请问有没有兼容uniapp+vue3的替代方案？

2 回复

在Vue3中，推荐使用ES6的import语法替代require。例如：

import myModule from './myModule.js'

或者使用动态导入：

const myModule = await import('./myModule.js')

这样就能正常引入JS文件了。


在 UniApp 的 Vue 3 版本中，由于底层框架升级，不再支持 CommonJS 的 require 语法，而是使用 ES6 的 import 模块化方案。以下是解决方案：

1. 使用 ES6 的 import 语法

直接替换 require 为 import：

// 错误方式（不支持）
const module = require('./utils.js');

// 正确方式
import module from './utils.js';
// 或动态导入（异步）
import('./utils.js').then(module => {
  // 使用模块
});

2. 处理默认导出和命名导出

  • 如果原 JS 文件使用 module.exports，需改为 ES6 导出：
// utils.js
export default {
  method1() {},
  method2() {}
};
// 或命名导出
export function method1() {}
export const config = {};
  • 引入时对应调整：
import utils from './utils.js'; // 默认导入
import { method1, config } from './utils.js'; // 命名导入

3. 动态导入（按需加载）

使用 import() 实现动态加载（返回 Promise）：

const loadModule = async () => {
  const module = await import('./utils.js');
  module.someMethod();
};

4. 注意事项

  • 确保文件路径正确（建议使用相对路径）。
  • 若 JS 文件为第三方库，检查是否支持 ES6 模块，否则需寻找替代方案。
  • 在 vue.config.js 中无需额外配置，UniApp Vue3 已内置模块化支持。

通过以上方法即可解决 require 不可用的问题，同时符合现代 JavaScript 标准。

回到顶部