VUE离线环境框架搭建（呕心沥血，全网最全）

---

目录

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离线项目搭建系列教程