After npm run dev runs the vue project, Error: error:0308010C:digital envelope routines::unsupported (pro-test is valid)
01. Question
1. After the vue project enters the command npm run dev in the terminal, the vue project cannot run, and a bunch of errors appear in the console, as shown in the figure below
2. The npm version of this project is 6.14.10, and the node version is v17.6.0
02. Problem analysis
1. This error is generally an unsupported encryption algorithm when OpenSSL encrypts and decrypts data
2. Update the caniuse-lite database or upgrade the OpenSSL version (not recommended)
Run the following command to update the caniuse-lite database:
npx browserslist@latest --update-db
To upgrade the OpenSSL version, you can refer to the following steps to upgrade OpenSSL:
Download the OpenSSL for Windows installation package https://slproweb.com/products/Win32OpenSSL.html
Install OpenSSL for Windows
Open a command prompt or PowerShell and set the environment variable with the following command:
set OPENSSL_CONF=C:\OpenSSL-Win32\bin\openssl.cfg
set PATH=C:\OpenSSL-Win32\bin;%PATH%
where C:\OpenSSL-Win32 is the path where OpenSSL for Windows is installed.
3. Reduce the node version to below 16 (not recommended, because the npm version is also affected by the node version. After upgrading the node version, the npm version may be incompatible and some dependencies cannot be installed)
03. Solutions
1. Set the NODE_OPTIONS parameter through the command, just enter it in the terminal of the current vue project (but you need to execute the command once before running the project)
Windows system:
set NODE_OPTIONS=–openssl-legacy-provider
linux or mac system:
export NODE_OPTIONS=–openssl-legacy-provider
2. Modify package.json, add set NODE_OPTIONS=–openssl-legacy-provider in the configuration item of the running command (to solve the shortcomings of 1)
set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve
Configure the running instructions of the environment, as shown in the following figure
