阅读 803

mall前端项目的安装与部署

SpringBoot实战电商项目mall地址:github.com/macrozheng/…

摘要

本文主要讲解mall前端项目mall-admin-web(2800+star)的在Windows和Linux环境下的安装及部署。mall-admin-web是一个电商后台管理系统的前端项目,基于Vue+Element实现。主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能。

Windows下的安装及部署

下载nodejs并安装

下载地址:nodejs.org/dist/v8.9.4…

下载mall-admin-web的代码

从IDEA中打开mall-admin-web项目

展示图片

打开控制台输入命令安装相关依赖

npm install
复制代码

展示图片

展示图片

已经搭建了mall后台环境的启动

运行本地mall-admin服务

展示图片

使用命令启动mall-admin-web

  • 在IDEA控制台中输入如下命令:
npm run dev
复制代码

展示图片

  • 访问地址http://localhost:8090 查看效果:
    展示图片
  • 进行登录操作,发现调用的是本地接口:
    展示图片

未搭建mall后台环境的启动

未搭建mall后台的需要使用线上api进行访问,线上API地址:http://39.98.190.128:8080

修改dev.env.js文件中的BASE_API为线上地址

展示图片

使用命令启动mall-admin-web

  • 在IDEA控制台中输入如下命令:
npm run dev
复制代码

展示图片

  • 访问地址http://localhost:8090 查看效果:
    展示图片
  • 进行登录操作,发现调用的是线上接口:
    展示图片

Linux下的部署

  • 修改prod.env.js文件的配置
    展示图片
  • 使用命令进行打包
npm run build
复制代码

展示图片

tar -zxvf dist.tar.gz
复制代码
  • 删除nginx的html文件夹
rm -rf html
复制代码
  • 移动dist文件夹到html文件夹
mv dist html
复制代码
  • 运行mall-admin服务
docker start mall-admin
复制代码
  • 重启nginx
docker restart nginx
复制代码

项目源码地址

github.com/macrozheng/…

公众号

mall项目全套学习教程连载中,关注公众号第一时间获取。

公众号图片

关注下面的标签,发现更多相似文章
评论