使用xterm報錯：Error: Terminal requires a parent element、及刪除時報錯：xterm.js: Parsing error 的問題

一、報錯：Error: Terminal requires a parent element.

　　按官網例子，我最初是在 created() 里加載的方法

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

// js
import { Terminal } from "xterm"; import "xterm/css/xterm.css"; export default { created () { // 不要在 created 里寫哦，因為需要使用 dom
    var term = new Terminal(); term.open(document.getElementById('terminal')); term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ') term.onData((val) => { term.write(val); }); } }

　　報錯：

Error: Terminal requires a parent element. at t.open (xterm.js?ba0f:1) at e.open (xterm.js?ba0f:1)

　　解決原因也很簡單，改成 mounted() 即可，因為需要使用到 dom，所以必須等 dom 結構准備好之后才能初始化。

二、命令刪除時報錯：xterm.js: Parsing error

1、問題背景

　　當我使用 xterm 示例的時候，無法刪除寫錯的字符，一刪除就報錯，報錯信息如下：

　　xterm.js?ba0f:1 xterm.js: Parsing error:  {position: 0, code: 127, currentState: 0, collect: 0, params: e, …}

2、解決方案：

　　查看 api 文檔發現有個 onKey ，其返回參數是個 Event（Object），那么通過這個 event 我們就可以做很多事情

　　代碼處理如下：通過判斷 keyCode 等就可以知道刪除時的情況

// 添加事件監聽器，支持輸入方法
term.onKey(e => { const printable = !e.domEvent.altKey && !e.domEvent.altGraphKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey if (e.domEvent.keyCode === 13) { term.prompt() } else if (e.domEvent.keyCode === 8) { // back 刪除的情況
    if (term._core.buffer.x > 2) { term.write('\b \b') } } else if (printable) { term.write(e.key) } console.log(1,'print', e.key) })

　　但是 onKey 不支持粘貼，所以使用 onData() 去支持粘貼

term.onData(key => {  // 粘貼的情況
  if(key.length > 1) term.write(key) })

　　這樣就可以刪除啦，詳細代碼見這篇博客：淺析如何使用前端終端組件Xterm.js制作一個web terminal

　　順便說一嘴的是：這個刪除是我在純前端測試的時候發現的問題，然后就這樣解決了，實際上在與后端websocket鏈接之后就不會有這個問題的，你的刪除指令發到后台，后台去將信息返回，然后你將信息write，就不會有這個問題了，就可以直接使用 onData() 即可。

　　要記住一點的是這個 xterm 就相當於是把每一步操作都發給后台，后台也同時把每一個操作去發給 ssh，相當於在 ssh 上做同步操作。所以刪除啊，左右移動之類的，都沒有問題。我之前一直沒想清楚，后來想清楚了，很多就說的通好理解了。相當於就是你的每一步操作，都由websocket發給后台，后台再將每一步操作通過ssh去發給終端，最后就是同步終端操作命令。這個想通就很好理解了。