当前位置：首页 > VUE

VUE实现sshLinux

2026-02-09 22:59:51VUE

VUE 实现 SSH 连接 Linux

在 Vue 项目中实现 SSH 连接 Linux 服务器，通常需要借助第三方库或后端服务。以下是几种常见方法：

前端实现（纯浏览器方案）

使用 xterm.js 和 websocket 实现浏览器内的 SSH 终端：

安装依赖：

npm install xterm @xterm/xterm @xterm/addon-fit @xterm/addon-attach

创建 Vue 组件：

<template>
  <div id="terminal"></div>
</template>

<script>
import { Terminal } from '@xterm/xterm';
import { FitAddon } from '@xterm/addon-fit';
import { AttachAddon } from '@xterm/addon-attach';

export default {
  mounted() {
    const term = new Terminal();
    const fitAddon = new FitAddon();
    term.loadAddon(fitAddon);

    const socket = new WebSocket('ws://your-backend-websocket-url');
    const attachAddon = new AttachAddon(socket);
    term.loadAddon(attachAddon);

    term.open(document.getElementById('terminal'));
    fitAddon.fit();
  }
}
</script>

<style>
@import '@xterm/xterm/css/xterm.css';
</style>

后端服务要求

需要配套的后端服务处理实际的 SSH 连接，例如使用 Node.js 的 ssh2 库：

const WebSocket = require('ws');
const { Client } = require('ssh2');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  const conn = new Client();

  conn.on('ready', () => {
    conn.shell((err, stream) => {
      if (err) return ws.close();

      ws.on('message', (data) => stream.write(data));
      stream.on('data', (data) => ws.send(data.toString()));

      ws.on('close', () => conn.end());
    });
  }).connect({
    host: 'linux-server-ip',
    port: 22,
    username: 'your-username',
    password: 'your-password'
    // 或使用 privateKey: require('fs').readFileSync('/path/to/key')
  });
});

安全注意事项