推荐一款仿终端个人主页[详细介绍如何安装]

今天我要和大家分享一个非常好看的仿终端个人主页预览站链接

首先，项目的GitHub地址：Tomotoes/react-terminal: 🍳A terminal emulator in React.

接下来，我将详细介绍如何使用宝塔面板来安装这个程序。

一. 准备环境

打开宝塔面板的软件商店，下载并安装 Node.js。
打开Node.js管理器，切换到命令行版本。

基础环境准备完毕。

二. 拉取项目

在面板左侧点击文件，在wwwroot路径下新建一个文件夹。
进入新建的文件夹，点击终端。
切换为宝塔镜像源。在终端中执行以下命令，切换为淘宝镜像：
shell
```
npm config set registry https://registry.npm.taobao.org
```
查看当前使用的镜像地址：
shell
```
npm config get registry
```
安装 Yarn，你可以使用以下命令进行安装：
shell
```
npm install -g yarn
```
验证安装是否成功：
shell
```
yarn --version
```
拉取项目源码：
shell
```
git clone https://github.com/Tomotoes/react-terminal.git
```
当然，也可以从GitHub下载项目，然后手动上传到这个目录。
进入刚刚拉取的源码文件夹，删除两个 lock 文件。
在当前目录继续执行以下命令，安装项目所需的依赖：
shell
```
yarn add react-terminal-app
```
当然，你也可以使用 npm 安装，不过推荐使用 yarn：
shell
```
npm i react-terminal-app
```

三.

点击网站，打开 Node 项目并添加一个新的 Node 项目。
如果添加成功且没有报错，点击启动选项，然后选择“启动”。
切换到启动选项后，重启一下服务。
访问你的 IP 地址加上端口号 3000，你应该能看到项目已经成功运行。

四.外网映射

添加一个域名，打开外网映射。
当你访问域名时，可能会出现“Invalid Host header”错误。

接下来，我们来解决这个问题。

在项目根目录创建一个名为 webpack.config.js 的文件，并添加以下内容：

javascript

1
2
3
4
5
6
7
8
9
10
11const path = require('path');

module.exports = {
  // ...其他配置

  devServer: {
    disableHostCheck: true,
    // 其他 devServer 配置...
  }
};

修改 nbw.config.js 文件，添加以下内容：

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16module.exports = {
  type: 'react-component',
  npm: {
    esModules: true,
    umd: {
      global: 'y',
      externals: {
        react: 'React'
      }
    }
  },
  webpack: {
    config: 'webpack.config.js'
  },
};

修改 package.json 文件，将启动命令改为：

json

"start": "nwb serve-react-demo --config webpack.config.js",

重启项目后，应该能够通过域名直接访问项目了最后一步，我踩坑了好久才解决这个问题

推荐一款仿终端个人主页[详细介绍如何安装]

一. 准备环境

二. 拉取项目

四.外网映射

评论 (0)

还没有评论