Windows部署运行Vue项目（webpack）及相关问题记录

一、Vue项目部署

Vue项目（此文主要指使用webpack实现打包的Vue项目）部署运行主要是两个步骤，第一步是安装好项目所需要的依赖包（npm install），第二步就是运行（npm run dev）。这两步的前提是下载好Node.js。

Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境。

在Node.js中，包含了webpack打包所需的功能，以及npm。npm类似于Python中的pip，用于管理一些依赖包，但具体而言，其功能更为强大，不仅可以安装依赖包，还可以运行Vue项目。

为了实现部署运行一个vue项目，首先我们需要下载安装Node.js。推荐下载低于16的版本，这里笔者选择下载安装14.18.0。为什么选择安装14.18.0版本，后续在相关问题中会提及原因，建议读者看完文章后续的相关问题记录后，再决定自己需要下载哪一个版本的Node.js。
//
//
//

1 Node.js下载安装

打开Node.js中文主页（https://nodejs.org/zh-cn/），点击其他下载。
来到更丰富的下载选择页面，拉倒底部，点击以往的版本。
打开以往发布的Node.js页面，并在搜索栏输入你所需要的Node.js版本。

输入版本号之后，页面就只剩下指定的版本了，如果你没有特别具体的版本号，只希望下载Node14，也可以只输入14.。而后点击下载按钮，前往具体的下载页面。
选择符合自己版本的安装包下载，比如笔者是Windows x64，然后希望选择可执行文件下载安装，则点击node-v14.18.0-x64.msi。
双击运行msi文件，进行安装。一直Next即可，除非你需要将Node.js安装到自己指定的目录。另外，在这个页面的选项是安装额外的Node.js所需资源，可以不勾选，勾选的话，会弹出一个框框下载很多东西
在命令行中输入

node -v
npm -v

可分别查看node版本于npm版本，具体如下，如果正常提示版本号，则表示安装成功。

//
//
//
//

2 项目依赖安装

使用管理员方式运行控制台（CMD），进入项目文件夹目录下，并执行依赖包安装命令。
例如：

cd /d 项目路径
npm install

具体实例如下：

cd /d F:\CourseData\2021-2022-1\Class\ComputerEngineeringTraining\Project\frontend\exam
npm install --registry http://registry.npm.taobao.org/

其中，第一条命令是进入指定项目文件夹目录下，第二条是自动安装项目所需的依赖包。–registry用于指定资源库，此处指定淘宝的资源库，这样会相比于直接使用默认的国外资源库更快一些。
//
//
//
//

3 运行项目

直接在项目目录下执行如下命令即可运行项目

npm run dev

运行成功后，控制台出现如下界面，所示网址就项目地址，可输入浏览器访问。
//
//
//
//

如果读者需要创建Vue项目，则需要使用npm安装一个额外的Vue脚手架，用于自动构建Vue项目结构。具体可参考一个vue项目的运行流程，从第二步安装vue-cli开始学习即可。其中

cnpm install -g vue-cli

cnpm是一个默认使用国内资源库的npm，不过不建议安装使用这个，更推荐使用本文在项目依赖安装部分所提及的 –registry 来指定加速源。

二、相关问题记录

1 Node16及以上会导致的错误提示

当读者使用Node16及以上版本执行依赖包安装命令时，可能会出现如下问题，虽然存在乱码，但大致上可以看出是在重新编译某个组件时出现错误。MSBUILD报了一个错误信息。

通过在cmd中执行

chcp 65000

可将控制台的编码方法更改为UTF-8，而后重新执行依赖包安装命令，可将乱码的中文正常显示回来。

MSBUILD : error MSB4132: 无法识别工具版本“2.0”。可用的工具版本为 "4.0"。

遇到以上错误，先不要急着搜索相关文章去尝试解决，这很可能是由于Node版本过高导致的，建议先尝试降低Node版本，比如笔者就先降低版本至Node15.

2 降到Node15出现的错误提示

降到Node15版本后，与MSBUILD相关的错误消失了，新出现了一个关于VS的错误。具体如下图所示：

关键错误如下：

npm ERR! gyp ERR! find VS looking for Visual Studio 2015

安装时，npm没有找到VS2015，所以可以到这里下载一个Microsoft Build Tools 2015。安装完成后记得将MSBUILD的Bin文件夹添加到环境变量当中，如下图：

接着，删除项目中已下载安装好的依赖项，即删除文件夹node_modules，再重新安装一遍依赖项即可。如果还不行…… 建议卸载Node.js，再重新安装一遍。

完成依赖安装后，在Node15下，运行项目，出现以下关于Node-sass的相关错误。具体如下图所示：

Module build failed: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported

实际上这是由于Node版本于所部署的vue项目中的node-sass版本不一致所导致的，一种方法是调整node-sass版本。另一种则是尝试降低Node版本。比如node-sass的GITHUB主页（https://github.com/sass/node-sass）就给出了相关的版本对应关系：

通过浏览Vue项目中的package-lock.json，笔者可知道自己需要部署的这个vue项目中的node-sass版本为4.14.1。在node-sass的版本对应表中，该版本对应的Node为Node14，故笔者将Node版本再次降到Node14，而后问题解决。 注意，降低版本后，需要删除node_modules文件夹，再重新安装一遍依赖包。

3 由Python版本导致的错误

由于有的依赖包可能还需要Python的支持，并且需要Python 2.x，所以遇到Python相关错误，建议下载安装一个Python 2.x，并且配置好环境变量，然后再重新安装部署。

三、结语

综上，有三点值得注意，一是如果你没有安装Node.js，在部署其他人的Vue项目时，最好选择与该项目匹配的Node.js版本（如果不知道具体版本的话，可以先试试低于Node16的版本）。二是比较推荐使用–registry来指定加速源。最后，有时候一些依赖包依赖C++、Python，所以读者应当留意错误提示，去安装相应的C++、Python编译器或者其他工具。

npm install --registry http://registry.npm.taobao.org/

// 全文完

因笔者能力有限，若文章内容存在错误或不恰当之处，欢迎留言、私信批评指正。
Email：YePeanut[at]foxmail.com