更新Node及开发依赖后Vue项目构建编译报错求助

一、构建错误（digital envelope routines::unsupported） #

该错误由Node.js 17+版本采用OpenSSL 3.0导致加密算法兼容性问题引发，可通过以下方式解决：

• 单次构建临时修复：执行构建命令前追加环境变量

  NODE_OPTIONS=--openssl-legacy-provider npm run build
  

• 永久配置修改：编辑package.json中的scripts字段，将环境变量整合进build命令

  "scripts": {
    "build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build"
  }
  

  Windows系统需修改为：

  "scripts": {
    "build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
  }
  

• 备选方案：若上述方法无效，可降级Node.js至16.x稳定版本，或检查webpack配置中是否存在需调整的加密相关设置。

二、Vue UI缺失Dashboard/Plugins/Configuration标签页 #

此问题因Vue UI无法识别当前项目为标准Vue CLI项目导致，解决步骤如下：

• 检查项目根目录是否存在vue.config.js文件，若无则创建基础配置文件：

  module.exports = {
    // 可根据项目需求添加具体配置项
  }
  

• 确保@vue/cli-service已正确安装到开发依赖：

  npm install @vue/cli-service --save-dev
  

• 重新导入项目：关闭当前Vue UI窗口，重启vue ui命令，重新选择项目根目录导入。

• 若项目非Vue CLI创建，可尝试在根目录执行vue init（需全局安装@vue/cli）初始化CLI配置，操作前请备份现有文件避免覆盖。

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