【fly-iot飞驰物联】（7）：经过几天研究，终于把emq的Actorcloud的前端跑起来了，解决了sass的编译依赖问题，使用docker的node16镜像可以成功编译启动，下一步研究后端代码

fly-iot

已于 2023-05-20 08:08:37 修改

阅读量402

点赞数

分类专栏： fly-iot nodejs 文章标签：前端物联网 sass

于 2023-05-20 07:55:27 首次发布

本文链接：https://blog.csdn.net/freewebsys/article/details/130738595

版权

nodejs 同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

fly-iot

20 篇文章 7 订阅

订阅专栏

前言

本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/108971807
fly-iot飞凡物联专栏：
https://blog.csdn.net/freewebsys/category_12219758.html

未经博主允许不得转载。
博主CSDN地址是：https://blog.csdn.net/freewebsys
博主掘金地址是：https://juejin.cn/user/585379920479288
博主知乎地址是：https://www.zhihu.com/people/freewebsystem

0，背景

github项目地址：
https://github.com/actorcloud/ActorCloud

gitbook 文档地址：https://wivwiv.gitbooks.io/emq-actorcloud-doc/content/introduction/introduction.html

ActorCloud 使用手册 ActorCloud 是一个面向低功耗IoT网络，为企业提供一站式平台服务的物联网平台。ActorCloud 在安全可靠的基础上，为设备提供多种协议接入的通信能力，设备数据与消息流管理功能。

平台提供基础设备管理功能以连接、管理海量设备，实现设备的消息通信与数据采集持久化；集成规则引擎与数据可视化管理，灵活开放多种权限级别的管理、控制 API，通过 API 可快速开发上层应用，实现多端接入、设备远程控制。

IoT Hub：为终端上云建立可靠双向连接通道，进行认证鉴权、协议解析与消息路由；设备管理：终端注册开通与生命周期管理，提供状态、故障、流量的不间断监控；数据引擎：对获取的终端消息高速持久化、实时解析、规则事务处理与可视化展示；应用使能：提供终端SDK、APP SDK，开放丰富的 REST API 接口，集成消息推送接口。

1，关于前端项目

前端ui： vue+elementUI 。
这里使用docker 进行镜像的构建和编译。
因为非常方便的切换 node 环境。可以快速的解决兼容的问题。
实验了几个node 容器版本，发现 node18 noe16 都不可以，因为项目是几年前的。所以切换到 node14 测试。

首先下载前端项目：

git clone https://github.com/actorcloud/ActorCloud.git
cd ActorCloud/ui

# 然后使用docker 镜像启动容器：

docker run -itd --name node16 -p 9999:9999 -v `pwd`:/data node:16-bullseye-slim
docker exec -it node16 bash
# 进入容器使用 

# 然后使用yarn 进行安装：

yarn  install --registry=https://registry.npmmirror.com

发现sass 的问题，参考这个文章：
https://juejin.cn/post/7047378050270363662

修改package.json 的配置文件。
发现需要安装sass，依赖python3

    "node-sass": "^8.0.0",
    "sass-loader": "^10.4.1",

2，安装sass组件

和其他组件不一样，这个需要g++和 python2的环境。

# 设置阿里云源：
echo "deb http://mirrors.aliyun.com/debian/ bullseye main non-free contrib" > /etc/apt/sources.list
echo "deb-src http://mirrors.aliyun.com/debian/ bullseye main non-free contrib" >> /etc/apt/sources.list
echo "deb http://mirrors.aliyun.com/debian-security/ bullseye-security main" >> /etc/apt/sources.list
echo "deb-src http://mirrors.aliyun.com/debian-security/ bullseye-security main" >> /etc/apt/sources.list
echo "deb http://mirrors.aliyun.com/debian/ bullseye-updates main non-free contrib" >> /etc/apt/sources.list
echo "deb-src http://mirrors.aliyun.com/debian/ bullseye-updates main non-free contrib" >> /etc/apt/sources.list
echo "deb http://mirrors.aliyun.com/debian/ bullseye-backports main non-free contrib" >> /etc/apt/sources.list
echo "deb-src http://mirrors.aliyun.com/debian/ bullseye-backports main non-free contrib" >> /etc/apt/sources.list

apt update && apt install -y make g++ python3

然后在执行 yarn install

yarn install --registry=https://registry.npmmirror.com


yarn install v1.22.19
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
warning Lockfile has incorrect entry for "webpack@^4.0.0". Ignoring it.
warning @vue/cli-plugin-babel > webpack > watchpack > watchpack-chokidar2 > chokidar > fsevents@1.2.13: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
[2/4] Fetching packages...
warning vue-amap@0.5.10: The engine "core-js" appears to be invalid.
[3/4] Linking dependencies...
warning "vue-grid-layout > @interactjs/actions@1.10.2" has unmet peer dependency "@interactjs/core@1.10.2".
warning "vue-grid-layout > @interactjs/actions@1.10.2" has unmet peer dependency "@interactjs/utils@1.10.2".
warning "vue-grid-layout > @interactjs/auto-scroll@1.10.2" has unmet peer dependency "@interactjs/utils@1.10.2".
warning "vue-grid-layout > @interactjs/auto-start@1.10.2" has unmet peer dependency "@interactjs/core@1.10.2".
warning "vue-grid-layout > @interactjs/auto-start@1.10.2" has unmet peer dependency "@interactjs/utils@1.10.2".
warning "vue-grid-layout > @interactjs/modifiers@1.10.2" has unmet peer dependency "@interactjs/core@1.10.2".
warning "vue-grid-layout > @interactjs/modifiers@1.10.2" has unmet peer dependency "@interactjs/utils@1.10.2".
warning "vue-grid-layout > @interactjs/modifiers > @interactjs/snappers@1.10.2" has unmet peer dependency "@interactjs/utils@1.10.2".
warning "@vue/cli-plugin-unit-mocha > mocha-webpack@2.0.0-beta.0" has incorrect peer dependency "webpack@^4.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 202.98s.

经过几分钟的编译，执行成功，然后启动：

1 error found.
1 error potentially fixable with the `--fix` option.

Module Warning (from ./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js):
error: `@/components/EmqSearchSelect` import should occur before import of `../components/TopicForm` (import/order) at src/apps/rules/views/BusinessRuleDetails.vue:163:1:
  161 | import CodeEditor from '@/components/CodeEditor'
  162 | import TopicForm from '../components/TopicForm'
> 163 | import EmqSearchSelect from '@/components/EmqSearchSelect'
      | ^
  164 |
  165 | export default {
  166 |   name: 'business-rule-details-view',


1 error found.
1 error potentially fixable with the `--fix` option.

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

  App running at:
  - Local:   http://localhost:9999/ 
  - Network: unavailable

虽然报错了几个语法问题，但是问题不大，终于可以启动成功了。端口9999

在这里插入图片描述

服务器错误，正常，因为后端的代码还没有研究呢，已经非常不错了。

看node报错：

Proxy error: Could not proxy request /api/v1/backend_static?fileType=image&filename=sign.png from localhost:9999 to http://localhost:8000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

Proxy error: Could not proxy request /api/v1/backend_static?fileType=image&filename=favicon.ico from localhost:9999 to http://localhost:8000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

Proxy error: Could not proxy request /api/v1/login from localhost:9999 to http://localhost:8000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

Proxy error: Could not proxy request /api/v1/login from localhost:9999 to http://localhost:8000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

Proxy error: Could not proxy request /api/v1/login from localhost:9999 to http://localhost:8000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

3，总结

项目的前端使用node16 可以成功的跑起来。
其中项目使用sass 组件，这个依赖python3和c++，这个项目还是特别的赞的。后端是python写的。
继续进行研究。
以下是package.json 代码，记得删除之前的lock文件：

{
  "name": "actorcloud",
  "version": "1.0.0",
  "license": "Apache-2.0",
  "scripts": {
    "dev-localhost": "export VUE_APP_SERVER=http://127.0.0.1:7000 && yarn dev",
    "dev": "yarn get-apps && vue-cli-service serve",
    "build": "yarn get-apps && vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "get-apps": "node apps.config.js"
  },
  "dependencies": {
    "async-validator": "^1.11.5",
    "axios": "^1.3.4",
    "codemirror": "^5.36.0",
    "css-element-queries": "^1.1.1",
    "dateformat": "^3.0.3",
    "echarts": "^3.8.5",
    "element-ui": "^2.15.13",
    "jsonlint": "^1.6.2",
    "jszip": "^3.1.5",
    "lottie-web": "^5.4.1",
    "material-design-icons": "^3.0.1",
    "mqtt": "^3.0.0",
    "node-sass": "^8.0.0",
    "sass-loader": "^10.4.1",
    "screenfull": "^4.0.0",
    "script-loader": "^0.7.2",
    "socket.io-client": "^2.1.1",
    "vue": "^2.6.6",
    "vue-amap": "^0.5.4",
    "vue-grid-layout": "^2.1.13",
    "vue-i18n": "^7.8.1",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
    "vuex-router-sync": "^5.0.0",
    "vuex-shared-mutations": "^0.0.4",
    "webpack": "^5.83.1"
  },
  "devDependencies": {
    "@commitlint/cli": "^7.6.1",
    "@commitlint/config-conventional": "^7.6.0",
    "@vue/cli-plugin-babel": "^3.4.0",
    "@vue/cli-plugin-eslint": "^3.4.0",
    "@vue/cli-plugin-unit-mocha": "^3.2.0",
    "@vue/cli-service": "^3.9.0",
    "@vue/eslint-config-airbnb": "^4.0.0",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-eslint": "^10.0.1",
    "babel-plugin-component": "^1.1.1",
    "chai": "^4.1.2",
    "countup.js": "^1.9.3",
    "crypto-js": "^3.1.9-1",
    "eslint": "^5.13.0",
    "eslint-plugin-vue": "^5.1.0",
    "husky": "^2.3.0",
    "vue-template-compiler": "^2.6.6"
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
    }
  }
}

本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/108971807

在这里插入图片描述

fly-iot

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【fly-iot飞驰物联】（7）：经过几天研究，终于把emq的Actorcloud的前端跑起来了，解决了sass的编译依赖问题，使用docker的node16镜像可以成功编译启动，下一步研究后端代码

目的前端使用node16 可以成功的跑起来。其中项目使用sass 组件，这个依赖python3和c++，这个项目还是特别的赞的。后端是python写的。继续进行研究。
复制链接

扫一扫