🐱个人主页：不叫猫先生🙋‍♂️作者简介：前端领域新星创作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！💫系列专栏：vue3从入门到精通、TypeScript从入门到实践📢资料领取：前端进阶资料以及文中源码可以找我免费领取🔥前端学习交流：博主建立了一个前端交流群，汇集了各路大神，互相交流学习，期待你的加入！(文末有我wx或者直接私信)目录背景一、项目环境二、注册科大讯飞三、下载语音识别demo四、新建vue3项目五、项目目录六、配置七、踩坑记录八、实现效果背景本人最近在做数字人项目，用到科大讯飞的语音识别功能，遇到了许多坑，做个总结，给兄弟们铺铺路。科大讯飞语音识别主要

前言之前写了一个vue+django的一个通过串口控制的上位机系统。但是实际生产中，不如部署到服务器上，这样可以更好的节约成本。但是这样就需要弄一个客户端来控制处理串口信息。那我就在想能不能通过网页直接拿到客户端的串口信息。所以问了万能的chatgpt，得到了以下答案：是的，前端可以使用WebSerialAPI直接与客户端机器的串口通信，而Diango只需要负责存储数据。当客户端机器发送数据时，前端可以将数据发送到Diango服务器，Diango服务器再将数据存储到数据库中。当需要读取数据时，前端可以从Django服务器中获取数据并显示在页面上。所以我去研究了下WebSerialApi一、什么

首先在讲述vite优化之前，我们先来分析一下和传统的项目管理构建工具的区别，以webpack为例，它是利用plugin插件和loader加载器对项目的所有模块和依赖统一通过入口文件进行编译，从而变成我们html所需要的js格式渲染我们的页面。随着浏览器的发展，逐渐的已经支持了ES模块因此Vite在设计时考虑在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。优势：这样就避免了随着应用体积的增大，导致了启动服务缓慢，一处代码更新界面需要数秒钟才能显示的问题。运行速度真的没得说。同样的，作为一个新型的构建框架，也有很多的弊端。缺点：只能针对现代浏览

一、目标：使用vite搭建一个Vue3的项目，并启动成功。二、准备工作首先你要有Node.js、VSCode编辑器、Chrome浏览器关于下载的问题Node.js可以去官网下载链接：http://nodejs.cn/download/下载左边的长期支持版本就好，最新版本可能会友一些问题。VSCode的下载是比较麻烦的，这边建议直接去国内镜像的下载链接https://vscode.cdn.azure.cn/stable/b4c1bd0a9b03c749ea011b06c6d2676c8091a70c/VSCodeUserSetup-x64-1.57.0.exeChrome浏览器就不用多说了，有需

一、目标：使用vite搭建一个Vue3的项目，并启动成功。二、准备工作首先你要有Node.js、VSCode编辑器、Chrome浏览器关于下载的问题Node.js可以去官网下载链接：http://nodejs.cn/download/下载左边的长期支持版本就好，最新版本可能会友一些问题。VSCode的下载是比较麻烦的，这边建议直接去国内镜像的下载链接https://vscode.cdn.azure.cn/stable/b4c1bd0a9b03c749ea011b06c6d2676c8091a70c/VSCodeUserSetup-x64-1.57.0.exeChrome浏览器就不用多说了，有需

​ 1.首先安装插件npminstallunplugin-auto-import@vitejs/plugin-vue-D2.安装完成后在vite.congfig.ts中配置，红色部分就是关于插件的基础自动导入部分，这样就可以将vue和router的相关api全局导入了，importAutoImportfrom"unplugin-auto-import/vite"exportdefaultdefineConfig({ plugins:[  vue(),  AutoImport({   imports:["vue","vue-router"],   dts:"types/auto-imports.

​ 1.首先安装插件npminstallunplugin-auto-import@vitejs/plugin-vue-D2.安装完成后在vite.congfig.ts中配置，红色部分就是关于插件的基础自动导入部分，这样就可以将vue和router的相关api全局导入了，importAutoImportfrom"unplugin-auto-import/vite"exportdefaultdefineConfig({ plugins:[  vue(),  AutoImport({   imports:["vue","vue-router"],   dts:"types/auto-imports.

执行npminit@vitejs/app时报错：internal/modules/cjs/loader.js:1089thrownewERR_REQUIRE_ESM(filename,parentPath,packageJsonPath);一开始网上找原因，以为是node的版本过低，但是看了是自己的弄的版本号是12.1.x.x刚刚好跨过门槛，但是创建项目不成功，为了保险起见将node版本升级到了15.7.0。试了下，嗯，还是报错。又在网上找了半天，有人安装vite出问题，细瞅瞅，可能是npm的版本太低的原因。想想自己是不也是这个导致的，将npm版本原来的6.x.x更新到8.x.x。重新执行np

执行npminit@vitejs/app时报错：internal/modules/cjs/loader.js:1089thrownewERR_REQUIRE_ESM(filename,parentPath,packageJsonPath);一开始网上找原因，以为是node的版本过低，但是看了是自己的弄的版本号是12.1.x.x刚刚好跨过门槛，但是创建项目不成功，为了保险起见将node版本升级到了15.7.0。试了下，嗯，还是报错。又在网上找了半天，有人安装vite出问题，细瞅瞅，可能是npm的版本太低的原因。想想自己是不也是这个导致的，将npm版本原来的6.x.x更新到8.x.x。重新执行np

问题    今天从GitHub上拉下来了一个vue3+vite项目，之前就是安装依赖就可以运行了，但是今天一直报错，显示TypeError:vite.createFilterisnotafunction错误原因    vite版本与安装的依赖版本不匹配    近期vite3发布，但我们使用的还是v2，所以安装依赖的时候默认安装的是最新版本，这是就会出现版本和安装的依赖不匹配的问题    需要注意的还有一个点就是Vite不再支持Node12/13/15，因为vite已经进入了EOL阶段。现在必须使用Node14.18+/16+版本解决方法    ①升级到vite3npminstall-Dvite