奇思妙想录 卓越的人一大优点是:在不利与艰难的遭遇里百折不挠。——贝多芬
歌曲封面 未知作品

萌ICP备20248808号

津ICP备2023004371号-2

网站已运行 2 年 5 天 20 小时 23 分

Powered by Typecho & Sunny

0 online

Title

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

IhaveBB

·

Article
⚠️ 本文最后更新于2023年11月14日,已经过了248天没有更新,若内容或图片失效,请留言反馈
AI摘要:本文介绍了如何使用宝塔面板安装一个仿终端个人主页项目。首先,需要在宝塔面板中安装Node.js,然后通过Node.js管理器切换到命令行版本。接着,拉取项目源码,安装Yarn和项目依赖。在宝塔面板中添加Node项目并启动,最后通过外网映射访问域名。文章提供了详细的步骤和截图,帮助用户顺利完成安装。

Powered by AISummary.

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

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

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

一. 准备环境

  1. 打开宝塔面板的软件商店,下载并安装 Node.js。

    软件商店截图
  2. 打开Node.js管理器,切换到命令行版本。

    Node.js管理器截图

基础环境准备完毕。

二. 拉取项目

  1. 在面板左侧点击文件,在wwwroot路径下新建一个文件夹。
  2. 进入新建的文件夹,点击终端

    终端截图
  3. 切换为宝塔镜像源。在终端中执行以下命令,切换为淘宝镜像:

    ♾️ shell 代码:
    npm config set registry https://registry.npm.taobao.org

    查看当前使用的镜像地址:

    ♾️ shell 代码:
    npm config get registry
    切换镜像截图
  4. 安装 Yarn,你可以使用以下命令进行安装:

    ♾️ shell 代码:
    npm install -g yarn

    验证安装是否成功:

    ♾️ shell 代码:
    yarn --version
  5. 拉取项目源码:

    ♾️ shell 代码:
    git clone https://github.com/Tomotoes/react-terminal.git
    拉取项目截图

    当然,也可以从GitHub下载项目,然后手动上传到这个目录。

  6. 进入刚刚拉取的源码文件夹,删除两个 lock 文件。

    删除文件截图
  7. 在当前目录继续执行以下命令,安装项目所需的依赖:

    ♾️ shell 代码:
    yarn add react-terminal-app

    当然,你也可以使用 npm 安装,不过推荐使用 yarn:

    ♾️ shell 代码:
    npm i react-terminal-app

三.

  1. 点击网站,打开 Node 项目并添加一个新的 Node 项目。

    添加新项目截图
  2. 如果添加成功且没有报错,点击启动选项,然后选择“启动”。

    启动选项截图
  3. 切换到启动选项后,重启一下服务。

    重启服务截图
  4. 访问你的 IP 地址加上端口号 3000,你应该能看到项目已经成功运行。

四.外网映射

  1. 添加一个域名,打开外网映射。

    添加域名截图
  2. 当你访问域名时,可能会出现“Invalid Host header”错误。
  3. 接下来,我们来解决这个问题。

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

      ♾️ javascript 代码:
      const path = require('path');
      
      module.exports = {
        // ...其他配置
      
        devServer: {
          disableHostCheck: true,
          // 其他 devServer 配置...
        }
      };
    2. 修改 nbw.config.js 文件,添加以下内容:

      ♾️ javascript 代码:
      module.exports = {
        type: 'react-component',
        npm: {
          esModules: true,
          umd: {
            global: 'y',
            externals: {
              react: 'React'
            }
          }
        },
        webpack: {
          config: 'webpack.config.js'
        },
      };
    3. 修改 package.json 文件,将启动命令改为:

      ♾️ json 代码:
      "start": "nwb serve-react-demo --config webpack.config.js",

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

现在已有 0 条评论,0 人点赞
Comment
发表
搜 索 消 息 足 迹
你还不曾留言过..
你还不曾留下足迹..
博主