前端开发环境搭建在内网是如何搭建的

​

前提

1.最好有一台与内网机子同系统版本型号的机子，或者虚拟机。

2.node 等相关版本需要相同

具体流程

本质上是在能连外网的机子上配置相关环境之后再拷贝到内网机子上

1. 2 台机子均安装对应 node 版本 以 14.16.0 为例

2. 全局安装 vue-cli，webpack，如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 卸载它

npm install -g @vue/clinpm install -g webpacknpm install -g webpack-cli

1. 查看缓存目录 npm config get cache,C:/User/Username/AppData/Roaming/npm-cache 这里是 npm 的缓存文件,将该目录下的 npm 和 npm-cache 拷贝至目标机子相同目录进行替换

2. 内网命令安装离线依赖包 使用 npm root -g 查看当前 npm 全局安装目录；然后把 npm-cache 缓存目录复制到 npm 目录里面

npm install --cache ./npm-cache --optional --cache-min 99999999999 --shrinkwrap false @vue/clinpm install --cache ./npm-cache --optional --cache-min 99999999999 --shrinkwrap false webpacknpm install --cache ./npm-cache --optional --cache-min 99999999999 --shrinkwrap false webpack-cli
在npm-cache目录里面，内网离线安装@vue/cli操作，如果之前没安装@vue/cli插件，运行上面行代码会报错，没这个插件 
上面命令指定，只有超过999999分钟的模块，才从 registry 下载。实际上就是指定，所有模块都从缓存安装，这样就大大加快了下载速度。
npm install --cache ./npm-cache --optional --cache-min 99999999999 --shrinkwrap false 指安装npm离线包的所有包，在外网安装的所有包（npm-cache）

1. 在有网络的机子上启动项目，进行 npm install 将将 node_modules 文件夹打包拷贝到内网机内，替换掉项目中的 node_modules 文件夹

2. 运行 npm install 依赖安装后则可以运行项目,如果有依赖没有关联可以先 npm rebuild 一下重新构建项目依赖

3. 如果这里运行 vue-cli-service 不是内前端培训部或外部命令，则可能因为 node_modules 依赖包出了问题。mac 电脑的依赖包 node_modules 在 windows 环境下有些不能运行。有相同的系统安装的依赖包，重新运行

4. 不能使用 cnpm 安装 node_modules 依赖包,使用 cnpm 安装的依赖包是具备快捷目录的，不能进行复制或压缩到 U 盘，建议使用 npm 安装

5. 如果出现 vue 项目运行报错 node_modules/.bin/vue-cli-service: Permission denied 运行 chmod 777 项目文件夹/node_modules/.bin/vue-cli-service 提权后运行

node-sass 内网环境安装

1.查看当前系统使用版本

node -p "[process.platform,process.arch,process.versions.modules].join('-')"

2.根据版本去 node-sass 的 GitHub 官网下载对应版本，并存放到某一目录下，此例子为 win32-x64-83_binding.node 建议安装 node-sass 4.00^ 的版本 5.0 版本有的项目 sass-loader 会出现报错。

​ 提示：根据 node 版本下载对应的 node-sass

3.设置 path 路径 set SASS_BINARY_PATH=D:/nodejs/.nodes/win32-x64-67_binding.node (根据自己的地址和文件名修改)或通过配置 path 将 SASS_BINARY_PATH 作为系统变量

4.echo %SASS_BINARY_PATH% 检查是否生效

5.npm install node-sass 安装 node-sass 依赖也可以 npm install --sass-binary-path=下载地址

6.去 node_modules\node-sass 里面看看有没有 vendor 文件夹，如果没有就新建一个 vendor\win32-x64-83(文件夹名字为下载版本）

7.将下载的 win32-x64-83_binding.node 复制一份进来，重命名为：binding.node 就可以啦

Node 模块的安装过程是这样的。

在 Linux 或 Mac 默认是用户主目录下的.npm 目录，在 Windows 默认是 %AppData%/npm-cache,可以通过 npm config get cache 来查看

1. 发出 npm install 命令

2. npm 向 registry 查询模块压缩包的网址

3. 下载压缩包，存放在 npm-cache 目录

4. 解压压缩包到当前项目的 node_modules 目录

5. 运行 npm install 的时候，只会检查 node_modules 目录，而不会检查 npm-cache 目录。也就是说，如果一个模块在 npm-cache 下有压缩包，但是没有安装在 node_modules 目录中，npm 依然会从远程仓库下载一次新的压缩包。

6. 如果在内网环境下可以通过-cache-min 参数，用于从缓存目录安装模块。

作者：czkm

​