ESP32-mDNS使用笔记

ESP32-mDNS使用笔记

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

例程采用example\protocols\http_server\restful_server

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

1、sdkconfig配置

配置ssid和password

CONFIG_EXAMPLE_WIFI_SSID="PDCN"
CONFIG_EXAMPLE_WIFI_PASSWORD="1234567890"

使能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

2、 安装npm

在node官网https://nodejs.org/en/下载，当前下载版本版本14.15.1LTS

cd path_to_this_example/front/web-demo
npm install
npm run build

path_to_this_example为工程路径

build完成生成dist文件夹

3、编译build & 烧录flash

基本操作…，略

4、打开浏览器

输入域名http://esp-home.local

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

sdkconfig中修改

CONFIG_EXAMPLE_MDNS_HOST_NAME="dobot-home"

front/src/vue.config.js中修改

target: 'http://dobot-home.local:80',

5、网页效果

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

• Home
• Chart
• Light
  

6、vue

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  iconfont: 'md',
})

这里iconfont选择md(material design)

https://material.io/resources/icons/?style=baseline