离线/内网环境下搭建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项目启动起来。


总结

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

  • 12
    点赞
  • 90
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
离线环境搭建Vue开发环境的步骤 1. 下载并安装Node.js:在离线环境中,需要事先准备好Node.js的安装。首先,将安装复制到离线环境中,并运行安装程序,按照指示完成Node.js的安装。 2. 安装npm:Node.js的安装中已经集成了npm(Node Package Manager),因此在安装Node.js的过程中也会自动安装npm。 3. 下载Vue CLI脚手架:在离线环境中,需要提前下载Vue CLI的安装。可以从Vue CLI的官方GitHub页面上下载对应的版本的安装,并将其复制到离线环境中的合适目录下。 4. 安装Vue CLI:在离线环境中,可以使用本地已下载的Vue CLI安装来安装Vue CLI。打开命令行工具,进入到Vue CLI安装所在的目录,使用以下命令安装Vue CLI: ``` npm install -g @vue/cli-4.5.9.tgz ``` 安装完成后,可以通过以下命令验证Vue CLI是否安装成功: ``` vue --version ``` 5. 创建Vue项目:在离线环境中,可以使用Vue CLI创建一个新的Vue项目。在命令行工具中,进入到项目所在的目录,使用以下命令创建一个新的Vue项目: ``` vue create my-app ``` 其中,`my-app`为项目的名称,可以根据实际需要自行设置。 6. 运行项目:创建完成后,进入到项目的目录中,使用以下命令运行项目: ``` cd my-app npm run serve ``` 运行成功后,可以通过浏览器访问`http://localhost:8080`查看项目运行效果。 通过以上步骤,在离线环境中就可以成功搭建Vue开发环境,并创建和运行一个Vue项目
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Julian向前冲

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值