关于在vue/vite项目中导入mqtt报出url错误的解决方案

最新推荐文章于 2023-11-24 00:20:24 发布
最新推荐文章于 2023-11-24 00:20:24 发布
阅读量2k 收藏 3
点赞数 5
分类专栏： vue+mqtt学习记录 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/badroad/article/details/125431876
版权

出现的错误

使用的是vue cli 或者是vite cli创建的项目

直接使用import导入mqtt会报错

import mqtt from 'mqtt'

错误如下

 解决方法

使用下面代码导入

import mqtt from 'mqtt/dist/mqtt'

使用的vue cli、vite、mqtt版本

vue-cli版本

vite版本

 mqtt版本

 

 

badroad
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
node.js中的url.parse已被弃用请使用URL类，通过GET发送数据（二）
laimaodashuaige的博客
04-22 1万+
因为node.js的url.parse方法采用的传统的urlObject,不符合URL现存标准-WHATWG URL API,因此弃用了。同时url.format(), url.resolve()也弃用了。 那我们怎么办呢？官方推荐可以使用URL类 所需软件： vscode，官网链接下载：https://code.visualstudio.com/；（也可以用自己习惯的编辑器） node.js，官网链接下载：http://nodejs.cn/ 安装自己电脑的合适版本即可。 安装这些一般直接点击下一步即可.
Vue项目部署在Spring Boot出现页面空白问题的解决方案
12-02
网上流行的解决方案是将assetsPublicPath: ‘/’改成’./’，下面说一下这个解决方案的...Vue项目部署在Spring Boot出现的另一个常见问题是当刷新浏览器的时候出现white label, 也就是404错误，解决的方案基本是把er
vue3+ts+vite创建mqtt
xiaovqq069的博客
08-04 768
在vue3+ts+vite的项目里使用mqtt
Vue-CLI项目中引用mqtt.js 报错，Buffer is not defined
热门推荐
weixin_44164032的博客
09-29 1万+
Vue-CLI项目中引用mqtt.js 报错，Buffer is not defined 原因是因为没有在vue.config.js中配置ProvidePlugin // vue.config.js ... configureWebpack: { plugins: [ ... new webpack.ProvidePlugin({ process: 'process/browser', Buffer: ['buffer', 'Buffer'] }) ] } Github .
项目引入 mqtt 报错 Uncaught ReferenceError: Buffer is not defined
weixin_44180427的博客
06-27 1540
Uncaught ReferenceError: Buffer is not defined
Vue中使用mqtt 过程和报错
Raoxiaohei的博客
09-28 2252
操作过程的话我就直接给大家放博客了，我也是按照他这个来的 MQTT在Vue中的使用和测试 本人遇见的问题是，后端同时在跟一个前端两个客户端进行对接，客户端那边是 mqtt 方式连接 前端页面按照哪个客户端的路径和端口链接就会链接失败 host:'mqtt://***.***.**/mqtt') 页面提示报错显示的路径是 ws://test.mosquitto.org/mqtt 查看资料后发现，前端页面不能通过mqtt 这种方式连接 只能通过ws 然后后端重新测试就没问题了，就能连接上了 然后搜索MQTT
vue中使用mqtt报错error in ./node_modules/_mqtt@4.3.7@mqtt/lib/client.js Module parse failed:
xiaommxhxxl的博客
04-06 3538
踩坑 解决办法 在npm官网中查看目前最稳定的版本 卸载原来安装的mqtt npm uninstall mqtt 安装稳定版的mqtt npm install mqtt@2.18.9 --save 安装完成可能还会报错没有没有找到包的问题，解决办法是安装需要的依赖即可 ...
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
12-09
但是看完问题又来了，官方给出的解决方案中没有说tomcat下，怎么决解。 解决方案 根据官方给出的解决方案原理 你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index...
Vue项目中跨域问题解决方案
08-27
本文给大家介绍了vue项目中跨域问题的完美解决方案，通过更改header，使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建），具体内容详情大家跟随脚本之家小编一起学习吧
基于Vue/Vue-Router/axios的前端用户权限控制解决方案源码
最新发布
03-28
Vue-Access-Control是一个基于Vue/Vue-Router/axios的前端用户权限控制解决方案，它包含66个文件，主要文件类型包括22个JavaScript文件、12个Vue文件、11个Map文件、6个CSS文件、2个Markdown文档、2个ICO图标、2个...
Vue Cli使用MQTT遇到的问题
weixin_41105255的博客
02-13 529
vue Cli使用mqtt，遇到polyfill问题、Buffer is not defined问题
MQTT网页客户端连接MQTT服务器的问题
qq_38694388的博客
01-12 4362
MQTT网页客户端连接MQTT服务器的问题WebSocket connection to ‘ws://XXX:1883/’ failed: Connection closed before receiving a handshake response 改为使用WebSocket_URL连接 <template> <div>4</div> </templ...
vue 使用 mqtt遇到的坑
kaixinvz的博客
07-22 848
mqtt vue websocket
Vue项目接入MQTT
cocomilkiiii的博客
10-23 1213
Vue项目接入MQTT 第一步，在创建好的vue项目中安装mqtt库 npm install mqtt --save Vue代码实现 <template> <div id="app"> <p>mqtt收到的数据：</p> <p>{{this.msg}}</p> </div> </template> <script> import mqtt from 'mqtt'
vue3+vite4使用mqtt协议遇到的问题
xiaoliyo_的博客
08-14 1961
vue3+vite4使用mqtt遇到的版本问题以及buffer和globel等等其他问题
关于MQTT 使用遇到问题
weixin_34290352的博客
04-28 2832
问题1：域名无法解析当报{_kCFStreamErrorCodeKey=1, _kCFStreamErrorDomainKey=12}错误时 意味着DNS无法解析域名，这时候你跑去问安卓的，然而他们那边又是正常的，为什么呢？关键在于MQTTWebsocketTransport.m 52行，- (NSURL*) endpointURL { NSString *protocol = (self....
使用vite + vue3 + mqtt时报错 ReferenceError: process is not defined
weixin_42946131的博客
09-06 759
全局环境变量被遗弃，变成了。
整理 Vue2 项目中各种报错&警告-信息
Mr.小灰狼_随笔
09-06 1万+
Vue 报错&警告-信息 _ 整理版 自己平常 Vue 项目 中出现的一些Bug 和 警告⚠️ , 日常记录一下 : 目录 ( 1 )[Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 404" ( 2 )[Vue warn]: Error in v-on handler: "TypeError: this.todos.push is not a function
【报错】Failed to resolve import “@/..“ from “src/...“ @找不到路径
owo_ovo的博客
11-24 7310
Failed to resolve import “@/.." from "src/..." @找不到路径
vite vue mqtt
09-08
Vite是一个基于ES模块的构建工具，用于快速构建现代化的Web应用程序。Vue是一个流行的JavaScript框架，用于构建用户界面。MQTT是一种轻量级的即时消息传输协议，通常用于物联网和实时通信场景。 如果你想在Vite中使用Vue和MQTT，你可以按照以下步骤进行操作： 1. 在你的项目文件夹中，使用命令行工具初始化一个新的Vite项目： ``` npm init vite@latest ``` 2. 安装Vue和MQTT依赖： ``` cd your-project-folder npm install vue mqtt ``` 3. 创建一个Vue组件，在组件中使用MQTT进行数据通信： ```javascript <template> <div> <p>{{ message }}</p> </div> </template> <script> import mqtt from 'mqtt' export default { data() { return { message: '' } }, created() { const client = mqtt.connect('mqtt://your-mqtt-broker-url') client.on('message', (topic, message) => { this.message = message.toString() }) client.subscribe('your-mqtt-topic') }, beforeUnmount() { client.end() } } </script> ``` 在上述代码中，你需要替换`your-mqtt-broker-url`为你的MQTT代理服务器的URL，`your-mqtt-topic`为你订阅的主题。 4. 在Vue应用中使用该组件： ```javascript import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') ``` 这是一个简单的示例，演示了在Vite和Vue应用中使用MQTT进行实时数据通信。你可以根据自己的需求进行定制和扩展。希望对你有帮助！如果你有任何问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值