文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue中内网/局域网/离线的情况下怎么使用及建立

2023-07-06 05:22

关注

这篇文章主要介绍“vue中内网/局域网/离线的情况下怎么使用及建立”,在日常操作中,相信很多人在vue中内网/局域网/离线的情况下怎么使用及建立问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue中内网/局域网/离线的情况下怎么使用及建立”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

准备

准备两台电脑,一台能上网,一台开发机器(不能上网)。

两台电脑分别安装最新版Nodejs的包管理器,以便使用npm命令。(备注:Nodejs自带npm)

资源下载

在有网的电脑中启动cmd,输入命令"npm config set registry=http://registry.npm.taobao.org "配置镜像站,(也可以不用配置,根据自己网络确定情况)。

在cmd中,输入"npm install vue -g",下载到全局路径node_modules文件夹下。

在cmd中,输入"npm install vue-router -g",下载到全局路径node_modules文件夹下。

在cmd中,输入"npm install webpack -g",下载到全局路径node_modules文件夹下。

在cmd中,输入"npm install vue-cli -g",下载到全局路径node_modules文件夹下。注意:vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目,他的配置并不全放在根目录下的 webpack.config.js 中。

在cmd中,输入"npm install webpack-dev-server -g",下载到全局路径node_modules文件夹下。注意:是为了规避错误"执行 node start env提示 'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序"。

在cmd中,输入"npm install -D webpack-cli -g",下载到全局路径node_modules文件夹下。注意:是为了规避错误“Cannot find module 'webpack/bin/config-yargs'”。

在cmd中,输入"npm install html-webpack-plugin -g",下载到全局路径node_modules文件夹下。注意:是为了规避错误“Cannot find module 'html-webpack-plugin'”。

下载后的文件在"C:\Users\XXX账户文件夹\AppData\Roaming\npm\node_modules"。

资源迁移

拷贝有网电脑的"C:\Users\XXX账户文件夹\AppData\Roaming\"中的"npm"和"npm-cache"两个文件夹到开发机的相同路径。

拷贝有网电脑的"C:\Users\XXX账户文件夹\"中的".vue-templates"到相同路径。(如果不存在,则执行"vue init webpack XXX文件夹",将会自动生成)

方法一:项目离线创建

在开发机中启动cmd,cd到指定目录。eg:输入"d:",到d盘;输入"cd projectA",到项目所在文件夹下。

输入命令"vue init webpack XXX文件夹 --offline",注意:XXX文件夹,指的是将要创建的存储文件夹。

按照步骤完成操作:(Vue build 改为选择runtime;最后一个选择Yes,use npm) 

 vue中内网/局域网/离线的情况下怎么使用及建立

输入命令"cd XXX文件夹",运行npm install安装依赖。

输入命令"npm run dev",启动项目。

输入命令"npm run build",建立index.html启动项。

如果有错误:全局安装的 webpack运行时 报错 Error: Cannot find module 'webpack'。

解决方法:添加系统环境变量,变量名为:NODE_PATH;变量值为:你的npm下的node_modules文件夹绝对路径。

方法二:项目迁移

在有网电脑按照方法一创建项目。

将项目文件夹拷贝到开发机上运行即可。

到此,关于“vue中内网/局域网/离线的情况下怎么使用及建立”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯