怎么安装离线vue环境

这篇具有很好参考价值的文章主要介绍了怎么安装离线vue环境。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

离线搭建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

怎么安装离线vue环境

C:\Users\zhangliying\AppData\Local\npm-cache

2)进入目标目录下,找到目录下的文件夹npm-cache,复制U盘或者光盘中

3.内网全局安装目录

命令行运行 npm root -g 查看全局安装目录;然后把npm-cache缓存目录复制到npm目录里面(如果放到同级会报错)

怎么安装离线vue环境

 进入全局目录 (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

正常:

怎么安装离线vue环境

异常:

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用记事本打开,把外网的路径替换为内网的路径

怎么安装离线vue环境

 把路径替换城内网安装路径,保存关闭

怎么安装离线vue环境

此时我们再运行cmd命令窗口,发现我们的vue环境就成功安装好了!

vue --version
vite --version

 如果是项目运行不起来报错如下:

怎么安装离线vue环境

解决方法:

1.重新创建一个空项目,放到内网上测试

2.然后安装插件,内网测试

3.移动页面,依次解决文章来源地址https://www.toymoban.com/news/detail-456448.html

到了这里,关于怎么安装离线vue环境的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ios环境搭建_xcode安装及运行源码

    抖音教学视频 目录 1、xcode 介绍 2、xcode 下载 3、xocde 运行ios源码 4、快捷键 Xcode 是运行在操作系统Mac OS X上的集成开发工具(IDE),由Apple Inc开发。Xcode是开发 macOS 和 iOS 应用程序的最快捷的方式。Xcode 具有统一的用户界面设计,编码、测试、调试都在一个简单的窗口内完成

    2024年02月03日
    浏览(31)
  • linux安装JDK及hadoop运行环境搭建

    1.linux中安装jdk (1)下载JDK至opt/install目录下,opt下创建目录soft,并解压至当前目录 tar xvf ./jdk-8u321-linux-x64.tar.gz -C /opt/soft/ (2)改名 (3)配置环境变量:vim /etc/profile #JAVA_HOME export JAVA_HOME=/opt/soft/jdk180 export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar export PATH=$PATH:$JAVA_HOM

    2024年02月11日
    浏览(35)
  • 云计算|OpenStack|社区版OpenStack安装部署文档(二---OpenStack运行环境搭建)

    一个良好的运行环境对于任何一个部署工作来说都是必须的,俗话说 万事开头难,其实很多部署工作失败的原因在于初始环境没有正确的配置,因此,按照官网的部署文档并结合自己的实际情况,配置一个合理的OpenStack运行环境是十分有必要的。 OpenStack的运行环境配置文档

    2023年04月08日
    浏览(40)
  • 搭建vue项目环境之二(完成基础环境的搭建之后开始正式安装)

            由于工作太忙了,一直都是东奔西跑的,好多知识都是零散的,最近刚好有空,就计划利用这个空闲时间认真的整理以前学过的知识,帮助自己回顾过往,中间也难免有很多错误,欢迎指正挑刺。一直以来都是万金油,最后就是啥都会,但是也都是啥都会一点也都不

    2024年02月11日
    浏览(33)
  • Vue3环境安装即项目搭建

    node.js 中文网 https://nodejs.org/zh-cn/cn/ 下载合适的安装包 进入系统环境变量界面 选择系统变量 path 点击新建 查看是否有node.js 的安装路径 查看 node 版本命令:node -v 查看 npm 版本命令 npm - v 检测 cnpm -v 检查版本 vue --version 或者 vue -V 1 第一种方式 使用命令行界面 进入你需要保存

    2024年01月22日
    浏览(39)
  • Vue3安装配置、开发环境搭建(组件安装卸载)(图文详细)

    本文目录: 一、vue的主要安装使用方式 二、node.js安装和配置 1、支持运行 Node.js的平台 2、Node.js 版本开发发布时间表(日期可能会有变化) 3、下载安装node.js 4、node.js环境配置 (1)、检查node 和npm版本信息 (2)、配置npm下载时的默认安装目录和缓存日志目录 (3)、npm配置

    2024年02月04日
    浏览(35)
  • macOS搭建PHP开发环境(brew安装nginx、mysql 和多版本php,并配置多个php同时运行的环境)

    由于homebrew主库中没有PHP7.2 之前的版本,并且7.2,7.3版本也被标记成过时版本;所以需要先挂在第三方的扩展,具体操作如下: php5.6 php7.3 php7.4 php8.2 默认新版8以上直接安装 sudo vim /usr/local/etc/php/5.6/php-fpm.conf  下的: 注意:5.6版本的配置文件路径和其他版本不一样 listen = 127

    2024年02月04日
    浏览(53)
  • Android Studio离线开发环境搭建

            因为安卓开发,搭建开发环境需要连接网络,访问外网,有时候下载速度非常慢,特别是在网络差的环境下,工程有可能搭建失败,所以,有必要学习一下如何搭建离线的开发环境。 1.安装Android Studio以及sdk,这部分需要读者自行下载并安装。下载地址:Download

    2024年02月08日
    浏览(38)
  • wxWidgets(1):在Ubuntu 环境中搭建wxWidgets 库环境,安装库和CodeBlocks的IDE,可以运行demo界面了,继续学习中

    选择这个主要是因为完全的开源,不想折腾 Qt的库,而且打包的文件比较大。 网络上面有很多的对比,而且使用QT的人比较多。 但是我觉得wxwidgets 更加偏向 c++ 语法本身,也有助学习C++。 没有太多的特殊封装,而且商业化更加友好,打包软件也比较少。 更偏向原生的系统,

    2024年02月07日
    浏览(36)
  • nextcloud+onlyoffice环境搭建(在线 or 离线)

    1.安装 MySQL(有MySQL就可以不装) -e MYSQL_ROOT_PASSWORD= root   参数是设置MySQL数据密码,根据自己情况修改密码,当前设置密码为 root 2.安装onlyoffice服务  3.安装nextcloud 4.获取onlyoffice秘钥(用于后面nextcloud的onlyoffice插件配置)  进入onlyoffice容器内  查看秘钥 如下图红框内容即为

    2024年02月07日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包