首先安裝 node 安裝xterm

npm i xterm --save

在 main.js 中加入：

import 'xterm/dist/xterm.css'

創建 Console.vue

<template><div class="console" id="terminal"></div> </template> <script> import Terminal from './Xterm' export default {name: 'Console',props: {terminal: {type: Object,default: {}}},data () {return {term: null,terminalSocket: null}},methods: {runRealTerminal () {console.log('webSocket is finished')},errorRealTerminal () {console.log('error')},closeRealTerminal () {console.log('close')}},mounted () {console.log('pid : ' + this.terminal.pid + ' is on ready')let terminalContainer = document.getElementById('terminal')this.term = new Terminal()this.term.open(terminalContainer)this.term._initialized = trueconsole.log('mounted is going on')this.term.fit()},beforeDestroy () {this.terminalSocket.close()this.term.destroy()} } </script>

增加Xterm.js 文件：

import { Terminal } from 'xterm' import * as fit from 'xterm/lib/addons/fit/fit' import * as attach from 'xterm/lib/addons/attach/attach' Terminal.applyAddon(fit) Terminal.applyAddon(attach)export default Terminal

demo vue:

<template><section><div id="log" style="margin-top:20px;"><my-terminal :terminal="terminal" ref="xterm"></my-terminal></div></section> </template><script> import Console from './Console'export default {data () {return {env: "",podName: "",contaName: "",logtxt: "",terminal: {pid: 1,name: 'terminal',cols: 1000,rows: 1000},}},methods: {},mounted(){var param = this.$route.params.name;var arr = param.split("==");this.env = arr[0]this.podName = arr[1]this.contaName = arr[2]this.$http.get('/***/api/v1/***/pod/logs?env=' + this.env + '&podName=' + this.podName + "&cntnerName=" + this.contaName).then(function(response){let resp = response.data;if(resp.success){this.logtxt = resp.data.replicasthis.logtxt = this.logtxt.replace(/\n/g, "\r\n")this.$refs.xterm.term.write(this.logtxt)this.$refs.xterm.term.write(this.logtxt)this.$refs.xterm.term.fit()}else{this.$message.error("獲取日志信息失敗！" + resp.errorMsg);}}).catch(function(err){this.$message.error("獲取日志信息失敗！" + err.message);});},components: {'my-terminal': Console}} </script><style scoped></style>

效果：

總結

以上是生活随笔為你收集整理的vue+xterm.js 实现Linux command界面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。