Skip to main content

vue running

fastbeeSeptember 27, 2024About 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 。若能正确展示登录页面,并能成功登录,菜单及页面展示正常,则表明环境搭建成功。