时间戳

首页 > 解决方案 > 使用vite+vue3构建项目并导入roslibjs后报错

javascript - 使用vite+vue3构建项目并导入roslibjs后报错

问题描述

我使用 vue3，当我使用vite创建项目时，我导入roslibjs库并使用其中一个函数得到错误，如下所示。但是当我尝试使用vuecli创建项目时，导入同一个库后，一切正常。 在此处输入图像描述

// vite created 'vite-app' project
npm init vite@latest
cd vite-app
npm instal --save roslib
// vuecli created 'vuecli-app' project
vue create vuecli-app
cd vuecli-app
npm install --save roslib

<script setup>
import ROSLIB from "roslib";
let ws_address = '127.0.0.1:9090'
let connected = false;
const ros = new ROSLIB.Ros({
    url: ws_address,
})
const connect = () => {
    ros.on("connection", () => {
        connected = true;
        console.log("Connected!");
    });
    ros.on("error", (error) => {
        console.log("Error connecting to websocket server: ", error);
    });
    ros.on("close", () => {
        connected = false;
        console.log("Connection to websocket server closed.");
    });
}
const disconnect = () => {
    ros.close();
}
</script>

<template>
    <div>
        <p class="text-success" v-if="connected">Connected!</p>
        <p class="text-danger" v-else>Not connected!</p>
  
        <input type="text" v-model="ws_address" />
        <br />
        <button @click="disconnect" class="btn btn-danger" v-if="connected">Disconnect!</button>
        <button @click="connect" class="btn btn-success" v-else>Connect!</button>
    </div>
</template>

标签： javascriptvue.jsvuejs3rosvite

解决方案

我不确定 Vue CLI + Webpackroslib在浏览器中的工作有何不同。

但是，在浏览器中，您应该使用docs的预构建版本roslib（其中特定于节点的构造被转译）：

如果你在浏览器中使用 roslib，所有的类都会被导出到一个名为 ROSLIB 的全局变量中。如果你使用 nodejs，这是你在 require('roslib') 时得到的变量

导入roslib/build/roslib.js脚本，该脚本设置window.ROSLIB：

<script setup>
import 'roslib/build/roslib';

const ros = new window.ROSLIB.Ros({
  url: ws_address,
});
⋮
</script>

演示

推荐阅读