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

34次阅读

共计 2323 个字符,预计需要花费 6 分钟才能阅读完成。

前提
1. 最好有一台与内网机子同零碎版本型号的机子,或者虚拟机。

2.node 等相干版本须要雷同

具体流程
实质上是在能连外网的机子上配置相干环境之后再拷贝到内网机子上
2 台机子均装置对应 node 版本 以 14.16.0 为例
全局装置 vue-cli,webpack,如果你曾经全局装置了旧版本的 vue-cli (1.x 或 2.x),你须要先通过 npm uninstall vue-cli - g 卸载它
npm install -g @vue/cli
npm install -g webpack
npm install -g webpack-cli

查看缓存目录 npm config get cache,C:/User/Username/AppData/Roaming/npm-cache 这里是 npm 的缓存文件, 将该目录下的 npm 和 npm-cache 拷贝至指标机子雷同目录进行替换
内网命令装置离线依赖包 应用 npm root -g 查看以后 npm 全局装置目录;而后把 npm-cache 缓存目录复制到 npm 目录外面
npm install –cache ./npm-cache –optional –cache-min 99999999999 –shrinkwrap false @vue/cli
npm install –cache ./npm-cache –optional –cache-min 99999999999 –shrinkwrap false webpack
npm 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)

在有网络的机子上启动我的项目,进行 npm install 将将 node_modules 文件夹打包拷贝到内网机内,替换掉我的项目中的 node_modules 文件夹
运行 npm install 依赖装置后则能够运行我的项目, 如果有依赖没有关联能够先 npm rebuild 一下从新构建我的项目依赖
如果这里运行 vue-cli-service 不是内前端培训部或外部命令,则可能因为 node_modules 依赖包出了问题。mac 电脑的依赖包 node_modules 在 windows 环境下有些不能运行。有雷同的零碎装置的依赖包,从新运行
不能应用 cnpm 装置 node_modules 依赖包, 应用 cnpm 装置的依赖包是具备快捷目录的,不能进行复制或压缩到 U 盘,倡议应用 npm 装置
如果呈现 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 来查看

收回 npm install 命令
npm 向 registry 查问模块压缩包的网址
下载压缩包,寄存在 npm-cache 目录
解压压缩包到以后我的项目的 node_modules 目录
运行 npm install 的时候,只会查看 node_modules 目录,而不会查看 npm-cache 目录。也就是说,如果一个模块在 npm-cache 下有压缩包,然而没有装置在 node_modules 目录中,npm 仍然会从近程仓库下载一次新的压缩包。
如果在内网环境下能够通过 -cache-min 参数,用于从缓存目录装置模块。
作者:czkm

正文完
 0