vue 内网/局域网/离线 的情况下 使用和建立项目!

  • 准备
  1. 准备两台电脑,一台能上网,一台开发机器(不能上网)。
  2. 两台电脑分别安装最新版Nodejs的包管理器,以便使用npm命令。(备注:Nodejs自带npm)
  • 资源下载
  1. 在有网的电脑中启动cmd,输入命令"npm config set registry=http://registry.npm.taobao.org "配置镜像站,(也可以不用配置,根据自己网络确定情况)。
  2. 在cmd中,输入"npm install vue -g",下载到全局路径node_modules文件夹下。
  3. 在cmd中,输入"npm install vue-router -g",下载到全局路径node_modules文件夹下。
  4. 在cmd中,输入"npm install webpack -g",下载到全局路径node_modules文件夹下。
  5. 在cmd中,输入"npm install vue-cli -g",下载到全局路径node_modules文件夹下。注意:vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目,他的配置并不全放在根目录下的 webpack.config.js 中
  6. 在cmd中,输入"npm install webpack-dev-server -g",下载到全局路径node_modules文件夹下。注意:是为了规避错误"执行 node start env提示 'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序"
  7. 在cmd中,输入"npm install -D webpack-cli -g",下载到全局路径node_modules文件夹下。注意:是为了规避错误“Cannot find module 'webpack/bin/config-yargs'”
  8. 在cmd中,输入"npm install html-webpack-plugin -g",下载到全局路径node_modules文件夹下。注意:是为了规避错误“Cannot find module 'html-webpack-plugin'”
  9. 下载后的文件在"C:\Users\XXX账户文件夹\AppData\Roaming\npm\node_modules"。
  • 资源迁移
  1. 拷贝有网电脑的"C:\Users\XXX账户文件夹\AppData\Roaming\"中的"npm"和"npm-cache"两个文件夹到开发机的相同路径。
  2. 拷贝有网电脑的"C:\Users\XXX账户文件夹\"中的".vue-templates"到相同路径。(如果不存在,则执行"vue init webpack XXX文件夹",将会自动生成)
  • 方法一:项目离线创建
  1. 在开发机中启动cmd,cd到指定目录。eg:输入"d:",到d盘;输入"cd projectA",到项目所在文件夹下。
  2. 输入命令"vue init webpack XXX文件夹 --offline",注意:XXX文件夹,指的是将要创建的存储文件夹。
    1. 按照步骤完成操作:(Vue build 改为选择runtime;最后一个选择Yes,use npm) 
  3. 输入命令"cd XXX文件夹",运行npm install安装依赖。
  4. 输入命令"npm run dev",启动项目。
  5. 输入命令"npm run build",建立index.html启动项。
  6. 如果有错误:全局安装的 webpack运行时 报错 Error: Cannot find module 'webpack'。解决方法:添加系统环境变量,变量名为:NODE_PATH;变量值为:你的npm下的node_modules文件夹绝对路径。
  • 方法二:项目迁移
  1. 在有网电脑按照方法一创建项目。
  2. 将项目文件夹拷贝到开发机上运行即可。
  • 10
    点赞
  • 106
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值