内网环境搭建NPM私服和VUE的完整开发环境


由于公司开发环境无法联网，又使用了VUE作为前端框架。所以需要搭建一套内网的VUE完整开发环境。
公司已经使用Nexus Repository Manager OSS 3.x搭建了一套Maven私服，这个也可以用来作为npm私服，官网还给了篇文档Nexus Repository Manager-代理Maven和npm快速入门。

1.搭建npm私服

网上已经有很多使用Nexus2或Nexus3搭建npm私服的文档，这里不再多说。但是如果你的VUE工程使用了node-sass或其它命令工具，仅仅只对淘宝 NPM 镜像进行代理是不行的，我们还需要对淘宝开源镜像进行代理。
如果您当前使用的是Nexus2，需要创建一个hosted仓库，然后将您需要文件上传到该仓库。
如果您当前使用的Nexus3，直接创建一个RAW格式的代理仓库，远程地址配置为https://npm.taobao.org/mirrors即可，如下图所示：

image.png

2.安装Node.js

这里分别安装了node-v8.16.2-x64.msi和node-v10.16.3-x64.msi两个版本，如果您在编译时报错，首先需要确认您工程中使用的依赖版本对Node.js的版本要求。

3.设置NPM镜像地址

以管理员身份运行cmd，执行以下命令：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
rem 设置npm镜像地址
npm config set registry http://ip:port/repository/npm-public/
npm config set sass_binary_site http://ip:port/repository/npm-dist/node-sass
?
rem 安装yarn
npm install -g yarn
rem 设置yarn镜像地址
yarn config set registry http://ip:port/repository/npm-public/ -g
rem 查询镜像设置结果
yarn config get registry
?
rem 设置node-sass依赖文件的下载地址
yarn config set sass_binary_site http://ip:port/repository/npm-dist/node-sass -g
rem 查询镜像设置结果
yarn config get sass_binary_site

我们的VUE工程使用了yarn命令，如果您没有使用yarn命令，不需要安装yarn和设置yarn的镜像地址。

3.安装node-gyp的运行环境

我们的前端VUE工程使用了node-sass，node-gyp是node-sass的先决安装条件。在进行install过程中，node-sass和node-gyp工具会自动进行安装，但其编译需要的python2.7和微软的Visual C++构建工具则需要我们手动安装，安装方式有两种，任选一种即可。
在线安装
使用命令自动安装python2.7以及VC++ build Tools，以管理员身份运行cmd，执行以下命令即可：

1
npm install --global --production windows-build-tools

离线安装
对于不能访问外网的电脑，我们需要手动安装Python2.7和Visual C++ 运行库。

  • 安装python2.7
    在进行Python2.7的安装时，选择Add python.exe to Path中的Entire feature will be installed on local hard drive可以自动将Python添加到环境变量中，也可以在安装之后手动设置Python的环境变量，如下图所示：


    image.png

  • 安装Visual C++运行库
    通过最新支持的 Visual C++ 下载下载Visual C++ 运行库，然后直接进行安装即可。我安装的是Microsoft Visual C++ 2015-2019合集版本，经过验证，安装Microsoft Visual C++ 2008也可以编译通过。

4.VUE工程的编译

在当前VUE工程目录进入cmd，直接执行yarn install和yarn run serve即可正常启动工程。
其所依赖的node-sass、node-gyp会自动进行安装。

5.参考文档

  1. node-gyp - Node.js native addon build tool

  2. Microsoft 支持.最新支持的 Visual C++ 下载

  3. node-sass binary-configuration-parameters

  4. Why does npm client need access to URLs other than my private registry?