linux安装idea_mall前端项目的安装与部署

本文主要讲解mall前端项目mall-admin-web的在Windows和Linux环境下的安装及部署。

Windows下的安装及部署

下载nodejs并安装

下载地址:https://nodejs.org/dist/v8.9.4/node-v8.9.4-x64.msi

下载mall-admin-web的代码

下载地址(github):https://github.com/macrozheng/mall-admin-web 下载地址(码云):https://gitee.com/macrozheng/mall-admin-web

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

61c70f7fe3e1b95821a0130416cca002.png

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

npm install

f12e184f2160b1012a1907a5062676db.png

e351418f3505e712d33b898aa26c38b8.png

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

运行本地mall-admin服务

2a60f02a9a75872dd97fc6c991b1fa3b.png

使用命令启动mall-admin-web
  • 在IDEA控制台中输入如下命令:

npm run dev

4852da48a92cfe258cf1fead693abde4.png

  • 访问地址http://localhost:8090 查看效果: 4bf4f2ece67aa815cf5cd0b0b58a2d61.png

  • 进行登录操作,发现调用的是本地接口: 3595457a30f4aa758bacf14a9b70c715.png

未搭建mall后台环境的启动

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

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

6232ff647343add56d01508c48f86058.png

使用命令启动mall-admin-web
  • 在IDEA控制台中输入如下命令:

npm run dev

4852da48a92cfe258cf1fead693abde4.png

  • 访问地址http://localhost:8090 查看效果: 4bf4f2ece67aa815cf5cd0b0b58a2d61.png

  • 进行登录操作,发现调用的是线上接口: a7b69a63b888bd9ee29143578df808a7.png

Linux下的部署

  • 修改prod.env.js文件的配置 45fa3d896ecc0f1ccc35a9e991835ff8.png

  • 使用命令进行打包

npm run build

3d83e72e21478a398281824b61c39bbc.png

  • 打包后的代码位置

    32e402c488e992fd7f0c39d61b2485d9.png

  • 将dist目录打包为dist.tar.gz文件386b0abbcdfe804d67f6bcd397ae5500.png

  • Linux上nginx的安装可以参考mall在Linux环境下的部署(基于Docker容器)中的nginx部分

  • 将dist.tar.gz上传到linux服务器(nginx相关目录)705e173cd0e2ee2dff905b0448bd9ee1.png

  • 使用该命令进行解压操作

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

  • 访问首页并登录:http://192.168.3.10132cc94219737f6f97f054da759cde7a0.png

  • 发现调用的是Linux服务器地址 9bc338cf535f127733e7b833a290469d.png

项目源码地址

https://github.com/macrozheng/mall-admin-web

推荐阅读

  • mall在Linux环境下的部署(基于Docker Compose)

  • mall在Linux环境下的部署(基于Docker容器)

  • mall在Windows环境下的部署

  • mall整合SpringBoot+MyBatis搭建基本骨架

  • mall整合Swagger-UI实现在线API文档

  • mall整合SpringSecurity和JWT实现认证和授权(一)

  • mall整合Elasticsearch实现商品搜索

  • mall整合Mongodb实现文档操作

  • mall整合RabbitMQ实现延迟消息

  • mall整合OSS实现文件上传


b0affc4cf09d9c1a8c3469ba41e3e2e4.png

欢迎关注,点个在看

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值