Environment variable configuration of NPM and yarn in Vue development environment (Windows 10)

Time:2021-6-12

1、 Nodejs

(1) Nodejs installation

This step is very simple. Download the Windows version of nodejs and install it according to the prompts. Remember to add nodejs to path. If there is no nodejs on the interface, it should be done for you by default. You can ignore my nonsense.

Verify whether it is installed as:

node -v

npm -v

If the version number is displayed normally, the installation is successful.

(2) Nodejs configuration

After nodejs is installed, the path of node.exe will be added to the system environment variable by default. If not, please add it manually. In addition, there are other configurations.

1. Configure prefix and cache directory

  • Change NPM global installation location
NPM config set prefix "your disk path"

The sample directory address is: C: program files node JS

npm config set prefix “C:\Program Files\nodejs\node_global”
  • Change NPM cache location
NPM config set cache "your disk path"

The sample directory address is: C: program files node JS

npm config set cache  “C:\Program Files\nodejs\node_cache

2. Configure environment variables
Right click “computer” – > “properties” – > “advanced system settings” – > “environment variables”

In system variables, set node_ PATH
Create a new node in the system variable_ Path, the value is

C:\Program Files\nodejs\node_global\node_modules

This value is the value that we passed in the previous step“npm config set prefix”Set the value of. Yes, check it with the following command

npm config get prefix

In the user variable, modify the path
Modify the path in the user variable and add

C:\Program Files\nodejs\node_global\bin

This value is the value that we passed in the previous step“npm config set prefix”Set the value of.

3. Configure alisource

npm config set registry https://registry.npm.taobao.org

2、 Yarn

(1) About yarn:

Yarn is a package management tool released by Facebook to replace NPM.

The characteristics of yarn are as follows

  • Super fast. Yarn caches every downloaded package, so there is no need to download it again. At the same time, parallel download is used to maximize resource utilization, so the installation speed is faster.
  • Super safe. Before executing the code, yarn checks the integrity of each installation package through the algorithm.
  • Super reliable. Using a detailed and concise lock file format and a clear installation algorithm, yarn can ensure that there is no difference in the work of different systems.

(2) Yarn installation

  • Method 1: use NPM to install
npm install -g yarn
  • Method 2: use the installation file to install

That is, download the EXE file from the official website to install (Windows), and install other systems according to the actual situation.

(3) Configure prefix and cache directory

  • Change the global installation location of yarn
Yarn config set global folder "your disk path"

The sample directory address is: C: program filesyarn

yarn config  set global-folder "C:\Program Files\yarn\global"
  • Change the horn cache location
Yarn config set cache folder "your disk path"

The sample directory address is: C: program filesyarn

yarn config cache-folder "C:\Program Files\yarn\cache"

Or find it in your user directory.yarnrcOpen it and edit it directly

(4) Configure environment variables

In our useGlobal installationWhen the package is loaded, the node will be generated under “C: program files yarnglobal” (the above example path should be configured according to your own actual situation)_ Modules.bin directory

We need to integrate C: program files into global node_ Add the entire directory of modules.bin to theSystem environment variablesOtherwise, the global package added by yarn cannot be found in CMD.

Check the bin position of the current horn

yarn global bin

Check the global installation location of the current horn

yarn global dir

(5) Yarn configures Ali source quantity

1. Take a look at the current source

yarn config get registry

2. Switch to taobaoyuan

yarn config set registry https://registry.npm.taobao.org
yarn config set sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
yarn config set phantomjs_cdnurl "http://cnpmjs.org/downloads"
yarn config set electron_mirror "https://npm.taobao.org/mirrors/electron/"
yarn config set sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
yarn config set profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
yarn config set chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"