Windows部署运行Vue项目(webpack)及相关问题记录
一、Vue项目部署Vue项目(此文主要指使用webpack实现打包的Vue项目)部署运行主要是两个步骤,第一步是安装好项目所需要的依赖包(npm install),第二步就是运行(npm run dev)。这两步的前提是下载好Node.js。Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境。在Node.js中,包含了webpack打包所需的功能,以及np
一、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
更多推荐
所有评论(0)