ESP32-mDNS使用笔记

时间：2024-12-09 16:01:02

ESP32-mDNS使用笔记

目的：通过域名去访问，而不通过IP地址

例程采用example\protocols\http_server\restful_server

实现步骤参考工程目录下的

1、sdkconfig配置

配置ssid和password

CONFIG_EXAMPLE_WIFI_SSID="PDCN"
CONFIG_EXAMPLE_WIFI_PASSWORD="1234567890"
  • 1
  • 2

使能GONFIG_EXAMPLE_WEBE_DEPLOY_SF

#
# Example Configuration
#
CONFIG_EXAMPLE_MDNS_HOST_NAME="esp-home"
# CONFIG_EXAMPLE_WEB_DEPLOY_SEMIHOST is not set
# CONFIG_EXAMPLE_WEB_DEPLOY_SD is not set
CONFIG_EXAMPLE_WEB_DEPLOY_SF=y
CONFIG_EXAMPLE_WEB_MOUNT_POINT="/www"
# end of Example Configuration
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

2、 安装npm

在node官网/en/下载，当前下载版本版本14.15.1LTS

cd path_to_this_example/front/web-demo
npm install
npm run build
  • 1
  • 2
  • 3

path_to_this_example为工程路径

build完成生成dist文件夹

3、编译build & 烧录flash

基本操作…，略

4、打开浏览器

输入域名

如要修改域名,以dobot-home为例

sdkconfig中修改

CONFIG_EXAMPLE_MDNS_HOST_NAME="dobot-home"
  • 1

front/src/中修改

target: ':80',
  • 1

5、网页效果

网页效果在front/src中修改
例程网页包括以下三个部分,在front/src/views路径下

  • Home
  • Chart
  • Light
    esp_home_local

6、vue 

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/'

(Vuetify, {
  iconfont: 'md',
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

这里iconfont选择md(material design)

/resources/icons/?style=baseline

相关文章