vue3+vite+ts项目集成科大讯飞语音识别（项目搭建过程以及踩坑记录）(vue3.0项目)

编辑：rootadmin

vue3+vite+ts项目集成科大讯飞语音识别（项目搭建过程以及踩坑记录）

推荐整理分享vue3+vite+ts项目集成科大讯飞语音识别（项目搭建过程以及踩坑记录）(vue3.0项目)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue3.0项目实战视频,vue3 + ts,vite vue3 typescript,vue3.0项目,vue3.0 ts,vue3.0项目,vuevant项目,vuevant项目,内容如对您有帮助，希望把文章链接给更多的朋友！

🐱 个人主页：不叫猫先生 🙋‍♂️ 作者简介：前端领域新星创作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！ 💫系列专栏：vue3从入门到精通、TypeScript从入门到实践 📢 资料领取：前端进阶资料以及文中源码可以找我免费领取 🔥 前端学习交流：博主建立了一个前端交流群，汇集了各路大神，互相交流学习，期待你的加入！(文末有我wx或者直接私信)

目录背景一、项目环境二、注册科大讯飞三、下载语音识别demo四、新建vue3项目五、项目目录六、配置七、踩坑记录八、实现效果背景

本人最近在做数字人项目，用到科大讯飞的语音识别功能，遇到了许多坑，做个总结，给兄弟们铺铺路。科大讯飞语音识别主要通过识别声音然后转换成文字，具体展示如下图所示：

一、项目环境

vue3+vite+ts项目集成科大讯飞语音识别（项目搭建过程以及踩坑记录）(vue3.0项目)

vue3+ts+vite

二、注册科大讯飞

注册后新建个应用，拿到APPID、APISecret、APIkey，在项目中会用到这三个参数，新用户有500条免费的服务量。 ,

三、下载语音识别demo

科大讯飞文档中心中示例demo，博主选择的是js语言，注意该demo项目环境为webpack+js

选择demo-js语言下载

四、新建vue3项目yarn creat vite 'project-name'或者npm init vite@latest 'project-name'

五、项目目录digitalPerson├─ .gitignore├─ README.md├─ auto-imports.d.ts├─ index.html├─ package.json├─ public│ ├─ index.html│ └─ vite.svg├─ src│ ├─ App.vue│ ├─ assets│ │ └─ vue.svg│ ├─ components│ │ └─ HelloWorld.vue│ ├─ iat_ws.js│ ├─ layout│ │ └─ index.vue│ ├─ main.ts│ ├─ router│ │ └─ index.ts│ ├─ style.css│ ├─ until│ │ ├─ base64js.js│ │ ├─ bootstrap.js│ │ ├─ browser.min.js│ │ ├─ jquery.js│ │ └─ transcode.worker.js│ ├─ views│ │ └─ index.vue│ └─ vite-env.d.ts├─ tsconfig.json├─ tsconfig.node.json├─ vite.config.ts├─ vite.config.ts.js└─ yarn.lock六、配置

package.json配置项具体如下，我们需要安装一些依赖来支持语音识别demo适应vue3环境，不然会遇到很多问题.

"dependencies": { "@originjs/vite-plugin-commonjs": "^1.0.3", "@rollup/plugin-inject": "^5.0.3", "ant-design-vue": "^3.2.15", "jquery": "^3.6.2", "vue": "^3.2.45", "vue-router": "^4.1.6" }, "devDependencies": { "@types/node": "^18.11.17", "@vitejs/plugin-vue": "^4.0.0", "crypto-js": "4.0.0", "typescript": "^4.9.3", "unplugin-auto-import": "^0.12.1", "vconsole": "^3.15.0", "vite": "^4.0.0", "vue-tsc": "^1.0.11" }依赖名称描述@originjs/vite-plugin-commonjs项目中混用 require 和 import ，即存在混用 commonJS 和 ES6 模块的情况，需要用该插件的transformMixedEsModules 配置进行 hotfix@rollup/plugin-inject使用该插件注入全局 jQuery 环境@types/node可以整体解决模块的

本文链接地址:https://www.jiuchutong.com/zhishi/287314.html 转载请保留说明！

上一篇：最小的计算机系统是什么(最小计算机系统包括)

下一篇：内斯特角灯塔上空的银河，苏格兰斯凯岛 (© Shaiith/Getty Images)(内斯塔特点)