Vue学习之nodejs环境搭建中的坑

Vue学习之nodejs环境搭建中的坑

1.nodejs安装后环境变量配置
（1）在nodejs安装目录下已有node_cache、node_global，如下：

（2）在系统属性->环境变量中新建一个名为NODE_PATH的系统变量，值为node_global下的node_modules所在路径，若无此文件夹新建node_modules如图1所示：

图1
若新建node_modules文件夹，右击文件夹查看是否有完全控制权限，无权限修改后保存。该步骤为了避免后续安装中无权限报错。

图2
（3）编辑系统变量中的Path,新建两个变量。%NODE_PATH%引用1中增加的变量，%变量名%此处名称采用1中新建的名称；再新增nodejs安装目录所在位置

(4)修改用户变量，

删除C:\Users\Lenovo\AppData\Roaming\npm 后追加：C:\Program Files\nodejs\node_global和C:\Program Files\nodejs\node_cache

2、安装vue错误
操作：执行 install vue -g
报错信息如下：

原因分析：node目录权限不够
解决方案：首先PowerShell中设置set-ExecutionPolicy RemoteSigned ，其次到node安装目录，右键属性，修改为完全控制；最后删除此电脑目录中的.npmrc文件
具体参考：
小尹将接受小王的崇拜 报错npm ERR! { Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\node_cache_locks’解决方法
3、HBuilderX 中vue项目编译报错
error:0308010C:digital envelope routines::unsupported
很多博主说出现这个错误是因为 node.js V17+版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响.
通过实践总结如下：

解决办法一：
Linux & Mac OS (windows git bash)
export NODE_OPTIONS=–openssl-legacy-provider
Windows命令提示符中执行
set NODE_OPTIONS=–openssl-legacy-provider
解决方法二：
修改package.json文件配置，修改serve和build的内容

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