使用Vite搭建Vue3项目引入roslibjs报错，同代码在VueCLI运行正常

问题根因 #

roslib 底层依赖了 Buffer、events、util 等 Node.js 核心模块，基于 Webpack 实现的 Vue CLI 会默认对这些 Node 模块做浏览器端 polyfill，所以可以正常运行。而 Vite 默认不提供 Node 核心模块的浏览器兼容处理，所以引入后会触发模块找不到、全局变量未定义等报错。

解决步骤 #

1. 安装所需依赖

npm install --save-dev @rollup/plugin-inject buffer events util process

2. 修改项目根目录下的 vite.config.js 配置，注入全局变量并配置模块别名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import inject from '@rollup/plugin-inject'

export default defineConfig({
  plugins: [
    vue(),
    // 注入全局变量
    inject({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser'
    })
  ],
  resolve: {
    alias: {
      // 配置Node核心模块的浏览器实现别名
      events: 'events',
      util: 'util',
      buffer: 'buffer',
    }
  }
})

3. 修正代码里的 WebSocket 地址格式
   roslib 初始化的url参数需要携带 WebSocket 协议前缀，你当前的地址缺少ws://前缀，会导致连接失败，修改对应代码：

// 原代码 let ws_address = '127.0.0.1:9090'
let ws_address = 'ws://127.0.0.1:9090'

如果修改后仍报Buffer is not defined错误，可以在项目入口index.html的<head>标签中添加全局声明：

<script type="module">
  import { Buffer } from 'buffer'
  window.Buffer = Buffer
</script>

完成以上修改后重新启动项目即可正常运行。

内容的提问来源于stack exchange，提问作者Desstiony