跨境派

跨境派

跨境派,专注跨境行业新闻资讯、跨境电商知识分享!

当前位置:首页 > 卖家故事 > mall-admin-web 前端项目部署详解

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

时间:2024-04-09 12:55:59 来源:网络cs 作者:利杜鹃 栏目:卖家故事 阅读:

标签: 部署  项目 
阅读本书更多章节>>>>

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_cachenode_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,作者:利杜鹃,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。

文章评论