离线/内网环境下搭建vue开发环境

系列文章目录

第一讲 离线/内网环境下搭建vue开发环境

第二讲 内网环境运行maven项目

---

目录

外网环境搭建

一、安装nodeJS

二、安装vue依赖包

内网环境正式开始

准备工作：

一、安装nodeJS

二、内网安装vue离线依赖包 

---

前言

最近接到一个项目，客户现场是全内网环境，只能vpn到客户内网，进到客户提供的华为云桌面进行开发。就是这么个情况，但是没办法，还得做事啊！现在形成文字加深印象，也把这段时间的成果记录一下，那开始吧！（ps：整个过程是在公司window电脑操作的，现在我在家里用mac pro写文章。截图有些不对，后面完善！）

---

外网环境搭建

一、安装nodeJS

先在我们自己的外网机上下载并安装node。（ps：node安装包在公司电脑里，后面再补）

​

二、安装vue依赖包

npm install -g @vue/cli
npm install -g webpack
npm install -g webpack-cli
npm install -g yarn

 熟悉vue的同学，做完上面两步，vue开发环境基本就搭建好了。不过，今天我们是要搭建内网环境，现在才刚开始。

内网环境正式开始

准备工作：

把nodeJS安装包copy到内网

把npm-cache缓存目录复制到内网   （npm-cache是npm安装过的全局依赖包目录）

查看缓存目录 npm config get cache

​

一、安装nodeJS

操作和验证安装成功参照外网是一样的。

二、内网安装vue离线依赖包 

命令行使用 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 install --cache ./npm-cache --optional --cache-min 99999999999 --shrinkwrap false yarn

最后，客户vue项目在内网git上，项目就不用新建，但是fetch下来之后无法启动，因为git上没有node_modules，得，在外网机上新建一个vue项目，进行install操作之后，把生成的node_modules复制到内网，这才把内网vue项目启动起来。

---

总结

以上就是今天要讲的内容，本文仅仅是自己工作中遇到的情况，按自己的理解进行介绍说明，如有不对的地方，欢迎指正。