vue running

fastbeeAbout 1 min

一、打开前端项目

推荐使用 Visual Studio Code 开发工具，FastBee物联网平台的前后端在一个仓库，后端为 springboot 目录，前端为 vue 目录。开发工具中打开vue前端目录即可。

二、修改配置

修改根目录的 .env.development 文件,后端接口默认8080端口，mqtt消息服务器中 tcp协议端口默认8081，ws协议端口默认8083，wss协议通过nginx代理访问8083端口。

# 后端接口地址
VUE_APP_SERVER_API_URL = 'http://localhost:8080'

# Mqtt消息服务器连接地址
VUE_APP_MQTT_SERVER_URL = 'ws://localhost:8083/mqtt'

# 百度地图AK
VUE_APP_BAI_DU_AK = 'nAtaBg9FYzav6c8P9rF9qzsWZfT8O0PD'

提示

百度地图AK到百度地图开放平台申请。

三、安装依赖

配置修改完成后，开始安装依赖，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。执行一下任一命令安装依赖：

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

提示

强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug
NodeJs是V16以上版本导致运行报错，在安装后使用 $env:NODE_OPTIONS="--openssl-legacy-provider"命令，然后重新运行

四、运行

依赖安装成功后，执行以下命令本地启动项目

npm run dev

打开浏览器，输入：http://localhost:80 默认账户/密码 admin/admin123 。若能正确展示登录页面，并能成功登录，菜单及页面展示正常，则表明环境搭建成功。