当我们需要对项目进行改造或者二次开发的过程中 避免不了要部署前端应用 下文介绍了当我们拿到项目地址后 从搭建到运行的详细过程。
目录
企业级开发绝大多数都会将项目放到 gitlab 等 项目管理工具上 如上图 拿到项目 URL
1. 拉取项目到本地
根据项目地址路径 通过项目管理工具 [ git 、svn .... ] 将项目数据加载到本地
以 git 为例 下载、解压并正确安装完后,在电脑任意位置 鼠标右键都会出现 git bash here 、git gui here 选项 。
git下载地址 : https://git-scm.com/download
进入 git bash 中就可以根据项目路径将数据拉取到本地 ,运用 git 命令 git clone + url 回车后 会让你指定保存项目的路径 自己指定即可 ,等待项目下载完毕 。
除了通过 git bash 拉取项目数据外 还可以借助开发工具拉取项目 如 Idea VSCode HBuilderX 但是也得需要我们提前安装好 git 。
2. 部署项目
以 VSCode 为例 ,下载 VSCode 正常是英文的界面 需要我们下载中文插件 应用并重启后会变成中文界面 ,其他插件按需自行配置即可。
通过 文件 --> 打开文件夹 的方式指定我们下载好的项目文件夹 通过 VSCode 加载项目 ... 导入成功后 如果 之前下载过 nodejs 可直接 运行 npm install 命令 加载资源文件 然后 到 package.json 文件下 查看运行项目的指令 ,启动即可 。
通过 node -v 查看当前 node 版本
如果之前没有下载过 node.js 则需要我们去下载
注意:根据项目要求下载 相应的 nodejs 版本 否则可能导致 出现一系列问题 。如下图就是我们当前 node 版本不匹配 ,版本过高 引起的问题 则需要我们去降低 node 版本 。
当我们管理多个项目的时候 会出现多个 nodejs 版本的情况 建议我们 下载 nvm 来实现多版本 node 的管理
nvm( node.js version management ),是一个 nodejs 的版本管理工具。nvm 是 node.js版本管理工具,为了解决 node.js 各种版本存在不兼容现象 可以通过它可以安装和切换不同版本的 node.js 。【可同时在一个环境中安装多个 node.js 版本(和配套的 npm )】
2.1 nvm 的下载 及安装
下载地址:https://github.com/coreybutler/nvm-windows/releases
下载完后解压并安装 。
安装完成后 正常系统会自动配置好环境变量 如下图 。
正确安装后 可通过 【cmd-管理员权限或者 VSCode 终端】 nvm -v 查看当前 nvm 版本
安装完 nvm 后 不要急着 安装 nodejs 找到 nvm 安装路径 找到 settings 文件 配置 npm 下载所需的镜像 此处 还可以指定 node 下载所需的镜像 我这里不需要 按需配置即可 。
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
注意:当 npm install 出现 报错 排除 了 nodejs 安装失败的问题 或者 卡在一个加载项不动 则需要检查 settings 中的 镜像路径 有的时候可能会改变 出现了及时更新镜像路径即可 - 官网查看
配置完成之后 我们就可以在 vscode 终端 、cmd 窗口 或 git bash here 中 下载我们所需要的node版本文件
查看当前所有能够安装的 nodejs 版本 nvm list available
安装指定版本的 nodejs 我这里是 v12.14.0 nvm install 12.14.0 等待安装成功 注意如果该 nvm 版本能够安装的 nodejs 没有我们项目需要的版本 可以自行下载 所需要的版本 放在 nvm 文件夹中 新建自定义所属版本的文件夹下 并解压 然后 nvm 会 主动去管理 该版本的 node
通过 nvm ls 查看当前 nvm 所管理的 所有 nodejs 带 * 号 为当前使用的 nodejs 版本
切换使用指定版本的 nodejs nvm use 16.20.1 即可切换对应版本的 node 最后 npm install 下载项目运行 所需要的资源 ,这样一步一步来 是不会出错的 。
正常 启动 项目 :npm run dev 根据实际情况而定 启动成功后 可根据路径 正常访问页面资源