后端：NODE安装，启动yarn管理的前端服务调用自己后端服务【小记】_node16.20

概述

1. 前端项目概述：vue-cli架搭建，yarn管理 （项目名：web-vue）
2. 后端服务：已经注册到开发环境（后台服务名：ems-server-qz）
3. 目标：启动前端项目 调用 自己的后台服务
4. 以下将详细介绍，NODE安装、配置，配置文件修改，前端服务启动

一、NODE（v16.20.2）安装以及配置

1. 下载安装

• 官网下载地址 版本V16.20.2
• 默认点击下一步即可
• 安装完成后，安装目录下增加文件夹 node_global node_cache 整体如下图
  

2. 配置环境变量（以本机安装路径为例），设置镜像

• 用户变量增加 path

D:\soft\nodejs\node_global

• 系统变量增加 NODE_PATH

D:\soft\nodejs\node_global\node_modules

• 执行以下命令set镜像、缓存、prefix

npm config set prefix D:\soft\nodejs\node_global
npm config set cache D:\soft\nodejs\node_cache
npm config set registry https://registry.npm.taobao.org

• 执行一下命令，检测是否安装成功

node -v
npm --version

二、项目配置文件修改以及启动

1. 代理地址 修改

找到配置文件vue.config.js或vue.config.ts，修改接口代理地址。

2. 修改服务名

一般来说，前端会将api单独提取到一个文件夹进行统一管理，且后台服务名会进行常量提取，
找到该文件夹下的文件，进行服务名更改即可，例如本项目：

3. 安装yarn

• 本项目用yarn作为包管理工具，所以需要安装yarn

// 执行命令
npm install yarn -g

4. 安装项目依赖

• yarn管理，本项目执行以下命令即可

yarn

• npm管理

npm install

• pnpm管理

pnpm install

5. 启用服务

需要运行的命令可通过package.json中的scripts属性获取。

• yarn管理，本项目执行以下命令即可

yarn

• npm管理

npm run serve

• pnpm管理

pnpm run serve

三、结语

启动一个vue、react、angular前端项目，大致按照以上步骤执行，即可成功启动。