内网开发之后端配置前端项目流程

目录

一、Node

二、VSCode

三、Vue/cli 脚手架

四、Git Bash Here

---

今天因为后端大哥需要测试自己后端项目的代码 ，但是又因为我们前端这里要一直调取请求后端那里的接口 Api ，所以后端大哥说让我们帮他把前端项目直接搞到自己电脑本地上，然后在本地启动前端项目就可以分开操作互不影响了 ，所以那就开整呗 ，但过程肯定不是一帆风顺的啊 ，So 就要记录一下 ， 免得以后再有类似的情况捉襟见肘啦 ， 哈哈 ， 我可真是个大聪明 。。。

一、Node

让你可以完成  npm  i   下载操作 

首先 ，因为我们都是在内网环境开发 ，所以很多东西 ，都不如外网那样开发的方便 ，

就比如说下载一些东西啥的 ，后端那里就说当初下载过一次 Node ，但没成功 ，

所以最基础的 NodeJs 咱就需要先配备好啊 ，然后我是把我自己本地的 Node 程序安装包

( node-v12.9.0-x64.msi ) 打包压缩发给后端进行安装的 ，这里版本就没用很高的 ，是怕版本太高会导致一些别的问题 ， 最后再要降低版本啥的那可就太麻烦了。

那 如果是 在外网呢 就直接去 Node 官网自行下载所需要的版本就 OK 啦

项目运行环境：node v10.x 以上版本 （ nvm nrm  npm i -g yarn  yrm ）

官网地址 ： Node.js

---

---

二、VSCode

里面有  > NPM 脚本 工具 ：（ 在资源管理器右边  ... 试图和更多操作里面 ）

方便后端大哥点击 package.json  下的  serve 运行 直接启动好前端项目

前端开发推荐软件 ：

VSCode ( 下载地址 :  Visual Studio Code - Code Editing. Redefined )

内网的话会有专门的下载地址供你使用 ， 这个的话问一下旁边人就 OK 了

---

可以顺手配置好一键启动通过谷歌浏览器运行项目

vue 使用 npm run dev  命令后 自动打开浏览器为谷歌

首先打开  vue.config.js  文件 ，将 浏览器 设置为 自动打开

module.exports = {
  devServer: {
    open: true, // 配置自动启动浏览器
  }
}

说白了就是 ：

open: true, // 配置自动启动浏览器

再设置 谷歌浏览器 为 默认浏览器 就 完事了

---

三、Vue/cli 脚手架

Vue/cli  安装 脚手架 工具 ：

（ 1 ）查看 npm 地址 ： 

{ $  npm config get registry }

（ 2 ）需要先连接到 “ 指定 ” 的 “ 镜像源地址 ”

{ $  npm config set registry " 指定的镜像源地址 " }

【 由于可能会是内网进行的开发 ，所以这里不非的是淘宝的镜像源地址 】

{ 切换淘宝镜像：$  npm config set registry https://registry.npm.taobao.org }

（ 3 ）下载 vue-cli 脚手架工具 ： { $  npm i -g @vue/cli }

（ 4 ）检查是否安装成功 ： { $  vue --version }   =>   @vue/cli  4.5.15

---

四、Git Bash Here

没有 Git Bash Here 的话 ， 先安装一个 ， 方便 clone 前端项目到本地

打开 Git Bash Here ， 输入命令 ： $   git clone 你的项目远程地址

克隆下来后 , 在你的项目目录下启动 cmd  打开黑窗口 ，

输入  npm i   下载 package.json  内的各种插件包

过程中可能会报错 ， 因为内网一些包不容易下载下来，

下载完成后直接 npm run server  运行启动项目就 OK 啦

---

整理一下在  npm i  过程中 遇到的报错小问题 ：
1、起初没有设置好镜像源地址信息，因为有些小伙伴可能会是内网进行开发，

所以刚开始很容易会出现这种问题 。
2、node-sass  包 ， npm  i  安装失败 ，这个包很容易会出现安装失败的问题 ，

所以我们可以选择 “离线下载” 的 解决模式 ，就是找别人下载好了的 node-sass 安装包 ，

然后直接放入 node_modules 文件夹内就 OK 了
3、没有安装全局 vue/cli 脚手架工具

（ 因为你后期启动 Vue 项目的时候需要用到 命令行 npm run serve ，就需要用到 ）