mall-admin-web 前端项目部署详解

阅读本书更多章节>>>>

mall-admin-web 前端项目部署详解

项目地址：https://github.com/macrozheng/mall
mall-admin-web是一个电商后台管理系统的前端项目，基于Vue+Element实现。我在部署该项目时遇到很多问题，发现网上没有具体的解决办法，所以写了这篇博客。如果这篇博客能对你有所帮助，点个小赞吧

一、打开项目

在终端中执行 npm install 或者yarn add install下载依赖包，这里比较推荐使用yarn下载网速更快（yarn安装自行百度）

我们可以看到，终端出现如下报错：

这因为要下载的node-sass和node版本不兼容

打开package.json文件查看node-sass的版本：

终端输入node -v查看node的版本：

这是node和node-sass兼容版本表格（详情指路：sass/node-sass: 🌈 Node.js bindings to libsass (github.com)）

我们可以看到node18不支持node-sass:4.13.0，只有node13支持node-sass:4.13.0。

所以我们要降低node的版本到node13。

二、降低node版本有两种方法

1.删除原先的node，下载低版本node（自行百度）

2.通过nvm可以实现多个node版本切换

这里更加推荐第二种，接下来介绍一下第二种方法的配置方法。

三、nvm的基本配置和使用

1.安装包下载地址：Releases · coreybutler/nvm-windows (github.com)

点击下载这个文件

2.解压点击.exe文件进行安装

3.选择安装路径，再点击下一步

4.在NVM文件夹下的nodejs文件用于存储nodejs版本文件，点击下一步，一直到install安装

5.安装完成后，我们打开刚刚安装nvm的文件夹。接着打开setting.txt文件

将这两行命令复制进去：

node_mirror: https://npm.taobao.org/mirrors/node/npm_mirror: https://npm.taobao.org/mirrors/npm/

6.安装成功后，查看环境变量配置。（安装好nvm后一般会默认配置好）

打开终端输入nvm -v验证，看是否输出版本号

四、安装node

nvm install node版本号  // 安装对应版本的nodenvm ls                 // 用于查看已安装的node版本列表nvm use node版本号      // 切换到对应版本的nodejsnvm install 18.16.1  // 安装18.16.1版本的nodejsnvm use 18.16.1      // 使用18.16.1版本的nodejs

1.安装node13

接下来以安装node13.14.0为例

可以看到NVM文件夹中自动生成了对应版本的文件夹

我们输入node -v来验证是否安装好node

2.配置node环境变量

我们在NVM文件夹中新建两个文件夹node_cache和node_global

创建完成后在终端中输入下面两行代码（以我自己的安装路径为例）

npm config set prefix "D:\NVM\node_global"npm config set cache "D:\NVM\node_cache"

接下来打开高级系统设置配置环境变量

（1）用户变量 — 编辑path

（2）**第二步编辑系统变量 — path **

（3） 在【系统变量】新建环境变量 NODE_PATH

NODE_PATH值为D:\NVM\node_global\node_modules，其中D:\NVM\node_global\node_modules是上述创建的全局模块安装路径文件夹

现在环境变量就配置好了

五、安装vue

在终端中输入

npm config set registry=https://registry.npm.taobao.org/npm install vue -gnpm install vue-cli -gnpm install webpack -g

验证是否安装成功：输入vue -V

我们成功用nvm安装了node13.14.0，后续要使用更高版本或者其他版本可以直接通过nvm命令在终端下载切换使用

六、下载项目依赖包

如果我们直接使用npm install命令下载依赖包会出现一下情况：

这里推荐使用cnpm来下载依赖包

安装cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

由于我们下载的是低版本的node，可以发现使用默认下载的cnpm下载的依赖包会报以下错误：

这是因为下载的cnpm与npm版本不兼容，我们可以查看npm的版本，根据npm版本来下载对应版本的cnpm。

查看npm版本npm -v

卸载cnpm并下载指定版本的cnpm

npm uninstall cnpmnpm install -g cnpm@6.0.0 --registry=https://registry.npm.taobao.org

接下来重新下载我们的依赖包（记得删除原来下载的依赖包）
终端中输入cnpm install

红色字可以不管，这样就下载好啦

接下来我们输入npm run dev来运行一下我们的项目

这样就运行成功啦！！！

简单来说运行该项目，由于node-sass与高版本的node不兼容，我们需要降低node版本。

降低node版本可以直接删除原先node，下载低版本。但是这种方法比较简单粗暴，不是特别推荐。

建议使用nvm可以方便快捷实现多个node版本的切换。

下载依赖包建议使用cnpm，并且由于默认下载的cnpm的版本与当前npm版本不兼容，所以我们需要根据npm的版本来下载对应版本的cnpm。

都看到这了，不点个赞吗

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-09/155975.html，文章来源：网络cs，作者：利杜鹃，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！