VUE离线环境框架搭建(呕心沥血,全网最全)

前端,VUE高级 专栏收录该内容
4 篇文章 2 订阅


目录

Node.js下载安装

联网电脑环境下载

联网电脑的Node.js资源拷贝到离线电脑

开发环境项目离线创建

项目拷贝

报错问题解决


Node.js下载安装

在联网的电脑上下载Node.js,Node.js的官网下载地址为https://nodejs.org/en/download/

下载完成后,双击.msi文件,将默认安装路径按照喜好修改,其余的设置默认即可。

联网电脑环境下载

在联网的电脑中"Ctrl+R"快捷键启动命令提示符工具,输入"node -v",出现版本号,说明node.js安装成功。

输入"npm -v"查看npm版本号

对npm进行更新,"npm -g install npm"

输入命令"npm config set registry=http://registry.npm.taobao.org"配置镜像站,加快组件下载速度。

输入命令"npm install vue -g"。

输入命令"npm install vue-router -g"。

输入命令"npm install webpack -g"。

输入命令"npm install vue-cli -g"。

输入命令"npm install webpack-dev-server -g"。

输入命令"npm install -D webpack-cli -g"。

输入命令"npm install html-webpack-plugin -g"。

新建一个"VueWorkSpace"文件夹作为来存放vue项目的工作空间

命令行cd到该目录下

去"C:\Users\root"目录下看有没有.vue-templates文件夹,有的话需要将.vue-templates文件夹删除

输入命令"vue init webpack vue-project"。vue-project是我vue项目的名称。

联网电脑的Node.js资源拷贝到离线电脑

将联网电脑的Node.js的安装包拷贝到离线电脑上,双击.msi文件,将默认安装路径按照喜好修改,其余的设置默认即可。

将联网电脑的"C:\Users\用户名\AppData\Roaming\"中的"npm"和"npm-cache"两个文件夹拷贝到离线电脑的相同目录下。

由于AppData 是隐藏文件夹,需要进行显示设置。

拷贝联网电脑的"C:\Users\用户名\"中的".vue-templates"到离线电脑的相同目录下。

开发环境项目离线创建

在离线电脑上新建一个"VueWorkSpace"文件夹作为来存放vue项目的工作空间

使用命令提示符工具cd到该目录下

输入命令"vue init webpack vue-project --offline"。vue-project是我vue项目的名字。

命令行cd到vue-project目录中,执行命令"npm install"安装依赖。

输入命令"npm run build"。

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

浏览器访问"http://localhost:8080/#/",打开vue界面。

项目拷贝

如果在联网电脑上有写好的项目需要转移到离线电脑上,只需要将项目文件拷贝到相应的目录下即可。

报错问题解决

全局安装的"webpack"运行时报错"Error: Cannot find module 'webpack'"。解决方法:添加系统环境变量,变量名为:NODE_PATH;变量值为:

C:\Users\Administrator\AppData\Roaming\npm\node_modules

如果想学习更多VUE+Springboot的项目知识,请关注:SpringBoot+VUE离线项目搭建系列教程

 

评论 12 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:游动-白 设计师:白松林 返回首页

打赏作者

Mr_青青子衿

我已经三天没吃饭了,哭~

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值