Bootstrap

Vue3 项目问题:import { performance } from ‘nodeperf_hooks’...SyntaxError Cannot use import...

问题描述与处理策略

1、问题描述
  • Vue3 项目中,执行 npm run dev 运行项目时,报错
import { performance } from ‘node:perf_hooks’

SyntaxError: Cannot use import statement outside a module
  1. 不能在模块外使用 import 语句,即在一个不支持 ES6 模块语法的环境中使用 import 语句

  2. Node.js 支持两种 JavaScript 模块系统:CommonJS(CJS)与 ES6 Modules(ESM)

2、处理策略
  1. 确保 Node.js 版本支持 ES6 模块,Node.js 版本从 12+ 开始提供支持

  2. 我这里是升级 Node.js 版本到 16+


补充学习

1、CommonJS 与 ES6 Modules
(1)CommonJS(CJS)
  1. CommonJS 是一种规范,是 JavaScript 模块化的实现,在 Node.js 后端项目中广泛使用

  2. 通过 require 函数来加载模块,通过 module.exports 或 exports 对象来导出模块中的内容

(2)ES6 Modules(ESM)
  1. ES6 Modules 是 ECMAScript 标准中定义的模块化规范,在前端项目中广泛使用

  2. 使用 import 和 export 语法来导入和导出模块内容

2、SyntaxError
(1)基本介绍
  • SyntaxError 通常发生在代码解析阶段,它表明 JavaScript 引擎在解析代码时遇到了问题,代码不符合 JavaScript 的语法规则,SyntaxError 可能由如下原因引起
  1. 拼写错误:例如,将 function 拼写为 funcion,将 var 拼写为 varr

  2. 缺少符号:例如,缺少括号、花括号、分号、引号等

  3. 使用了保留字作为变量名:例如,将 let、class、async 等用作变量名

  4. ES6+ 特性在不支持的环境中使用:在一个不支持最新 ECMAScript 特性的旧版 Node.js 环境中使用了 ES6+ 特性(例如,箭头函数、模板字符串等)

(2)演示
  1. 拼写错误
functio test() {}
# 输出结果

functio test() {}
        ^^^^

SyntaxError: Unexpected identifier
  1. 缺少符号
function test() {
# 输出结果

function test() {


SyntaxError: Unexpected end of input
  1. 使用了保留字作为变量名
var var = "Hello World";
# 输出结果

var var = "Hello World";
    ^^^

SyntaxError: Unexpected token 'var'
;