离线搭建vue环境运行项目步骤
公司开发环境使用内网,无法用外网,搭建环境的时候,发现内网系统没有安装vue脚手架。
注意: 首先保持外网node、npm和内网node、npm版本一致。npm被集成在nodejs中,而安装nodejs只需要把nodejs安装包copy到内网电脑安装。
1.在外网电脑上,使用npm install -g xxxx命令下载好我们所需要的各个安装包,比如:
npm install -g @vue/cli
npm install -g typescript
npm install vite -g
npm install -g pnpm
npm install --global webpack
npm install webpck-cli -g
2. 查看npm全局安装包的存放目录(外网电脑npm-cache缓存目录)
1)cmd运行命令:
npm config get cache
C:\Users\zhangliying\AppData\Local\npm-cache
2)进入目标目录下,找到目录下的文件夹npm-cache,复制U盘或者光盘中
3.内网全局安装目录
命令行运行 npm root -g 查看全局安装目录;然后把npm-cache缓存目录复制到npm目录里面(如果放到同级会报错)
进入全局目录 (node_modules的上一级目录),把npm-cache文件夹放进去
4. 在内网电脑上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 typescript
npm install --cache ./npm-cache --optional --cache-min 99999999999 --shrinkwrap false webpack-cli
npm install --cache ./npm-cache --optional --cache-min 99999999999 --shrinkwrap false webpack
npm install --cache ./npm-cache --optional --cache-min 99999999999 --shrinkwrap false pnpm
npm install --cache ./npm-cache --optional --cache-min 99999999999 --shrinkwrap false vite
5.把vue项目复制到内网 包括node_modules文件夹 (注意 mac和windows依赖包不能共用)
6.查看全局命令是否正常 npm list -global --debth 0
正常:
异常:
npm list -global --depth 0
--(empty)
解决方法:
npm root -g 命令找到npm文件夹
删除与npm目录同级的node_modules文件夹
把npm-cache文件夹放到npm目录里面
运行项目
如果上边步骤项目运行不起来
7. 在外网找到 C:\Users\zhangliying\AppData\Roaming\npm 、npm-cache包,把npm、npm-cache包,复制U盘或者光盘中
8. 在内网上,找到npm安装路径,npm root -g,把npm和npm-cache两个文件直接放进去替换原来的文件
9.配置环境变量
10.在进入npm下的node_modules的下一级目录npm,找到文件npmrc用记事本打开,把外网的路径替换为内网的路径
把路径替换城内网安装路径,保存关闭
此时我们再运行cmd命令窗口,发现我们的vue环境就成功安装好了!
vue --version
vite --version
如果是项目运行不起来报错如下:
解决方法:
1.重新创建一个空项目,放到内网上测试
2.然后安装插件,内网测试文章来源:https://www.toymoban.com/news/detail-456448.html
3.移动页面,依次解决文章来源地址https://www.toymoban.com/news/detail-456448.html
到了这里,关于怎么安装离线vue环境的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!