Vue项目require未定义报错及前端JS中require/import使用规则咨询

一、require和import的核心区别与使用规则 #

• require/exports：属于CommonJS规范，是Node.js原生支持的模块加载方式，运行时才会加载模块。浏览器本身不识别这个语法，必须靠Webpack、Browserify这类打包工具转译后才能在浏览器用，或者只在Node环境里用。写法是const module = require('模块路径')和module.exports = 导出内容。
• import/export：ES6模块规范，现代浏览器原生支持，但得满足两个条件：要么给script标签加type="module"，要么用打包工具处理。它是编译时加载模块，还支持树摇优化（去掉未使用的代码）。写法是import { 导出项 } from '模块路径'（命名导出）或者import 默认导出项 from '模块路径'（默认导出），导出用export const 项 = ...或者export default 项。
• package.json的"type": "module"：一旦加了这个配置，Node.js会把所有.js文件当作ES模块处理，这时不能用require，必须用import；如果没加，默认是CommonJS环境，支持require，也可以用.mjs后缀的文件写ES模块。

二、解决"require is not defined"报错的具体方案 #

1. 把所有require替换成ES模块语法
   直接把代码里的require('xxx')改成对应的import写法。如果是加载JSON文件，ES模块环境下可以用两种方式：

   • 用带assert的import：

     import mathSymbols from './math-symbols.json' assert { type: 'json' };
     // 后续处理渲染逻辑
     

   • 用fetch读取（兼容性更好）：

     async function loadAndRenderSymbols() {
       const res = await fetch('./math-symbols.json');
       const mathSymbols = await res.json();
       // 这里写把数学符号嵌入页面的逻辑
     }
     loadAndRenderSymbols();
     

2. 给脚本标签加上type="module"
   在HTML里引入你的JS文件时，必须加type="module"，比如：

   <script type="module" src="./your-main-script.js"></script>
   

   注意：用了type="module"后，脚本会自动开启严格模式，而且文件路径必须是完整的相对路径（比如要写./script.js，不能直接写script.js）。

3. 检查打包工具配置（如果用了的话）
   要是你用了Vite、Webpack这类工具：

   • Vite默认支持ES模块，直接用import就行，不用额外配置；
   • Webpack要确认配置里没有强制切换到CommonJS的设置，确保模块处理逻辑正常。

4. 如果不想改代码（不推荐）
   要是代码里大量用了require，不想逐个替换，可以用Browserify或者Webpack把代码打包成浏览器能识别的单文件，然后直接引入打包后的bundle.js，不用加type="module"。

内容的提问来源于stack exchange，提问作者alexrider07