从GitHub上新拉一个项目并在mac系统下运行遇到的种种问题

news/2025/5/21 20:56:37

如果项目已经被拉下来,现在我们要启动项目。

step1、需要了解该项目是什么,它的作用是什么,以及它可以解决的问题。阅读项目的介绍、文档和示例,确保对项目有一个基本的认识。

step2、设置开发环境:确保您的开发环境中安装了所需的工具和软件,例如文本编辑器(如Visual Studio Code)、Node.js和npm(或Yarn)包管理器。

一、安装node.js

查看电脑是否安装node

如果没有安装

 继续在终端用cd命令切换到你目前这个项目地址

比如我的jsmind地址存在了yangkexin文件下

cd /Users/yangkexin/jsmind

然后再输入

npm install

同时需要下载扩展

 

卡壳的点在于html代码里引入的三个外部文件地址一直是错的

jsmind.css,jsmind.dreaggable-node.js, jsmind.js,这仨文件光看目录是和html文件1_basic.html同级的。

所以引入时要打两个..

如果都是在同一个文件夹下,则用一个.即可

 

      <linktype="text/css"rel="stylesheet"href="../style/jsmind.css"/><script type="text/javascript" src="../js/jsmind.js"></script><scripttype="text/javascript"src="../js/jsmind.draggable-node.js"></script>

 如果运行不报错,但是弹不出来浏览器,

  

 如果你的 launch.json 文件内容是空的,那么你需要添加相应的调试配置到该文件中。以下是一个示例的 launch.json 文件内容,你可以根据你的项目和需要进行修改:

{"version": "0.2.0","configurations": [{"type": "chrome","request": "launch","name": "Launch in Chrome","url": "http://localhost:3000","webRoot": "${workspaceFolder}"},{"type": "firefox","request": "launch","name": "Launch in Firefox","url": "http://localhost:3000","webRoot": "${workspaceFolder}"}]
}

 再之后就能弹出浏览器了,但是点击network那三个文件爆红,拿jsmind.css举例子

jsmind.css 的请求 URL 是 file:///Users/yangkexin/jsmind/example/style/jsmind.css,这说明它是通过本地文件系统进行加载的,而不是通过网络请求。

在这种情况下,浏览器可能会限制加载本地文件系统的资源,因为它存在安全风险。你可以尝试将 1_basic.html 文件放在一个支持本地文件加载的服务器上进行访问,而不是直接从文件系统打开。

安装 http-server:打开终端(命令行界面),运行以下命令来全局安装 http-server:

使用管理员权限运行命令:在终端中,尝试以管理员身份运行命令。在 macOS 中,你可以在命令前加上 sudo 前缀,并输入管理员密码来提升权限。例如:

sudo npm install -g http-server

用 npx 运行 http-server:npx 是 npm 5.2.0 版本及更高版本中包含的一个工具,它可以临时安装并运行 npm 包。尝试在终端中运行以下命令:

npx http-server

如果终端显示:added 40 packages in 3s 11 packages are looking for funding run `npm fund` for details

这个消息是 npm 安装依赖包时的常见输出。它表示成功安装了一些包,并提醒你有一些包正在寻求资助。你可以选择运行 npm fund 命令来获取有关这些包资助的详细信息。

在终端中运行 http-server 命令,它应该已经安装完成了。然后,尝试在浏览器中访问 http://localhost:8080 或其他指定的端口号,以加载你的项目。

然后直接访问http://127.0.0.1:8081/1_basic.html

此时已经正常显示

 

文章来源:https://blog.csdn.net/weixin_49393290/article/details/131094715
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:https://dhexx.cn/news/show-4642930.html

相关文章

Python爬虫学习-简单爬取网页数据

疫情宅家无事&#xff0c;就随便写一些随笔吧QwQ… 这是一篇介绍如何用Python实现简单爬取网页数据并导入MySQL中的数据库的文章。主要用到BeautifulSoup requests 和 pymysql。 以网页https://jbk.39.net/mxyy/jbzs/为例&#xff0c;假设我们要爬取的部分数据如下图所示&#…

大模型信息提取、文本生成、视觉语音应用

448页新书《基础模型自然语言处理》&#xff0c;详述大模型在信息提取文本生成视觉语音应用。 Dr. Gerhard Paa 等人合著的《Foundation Models for Natural Language Processing》 一书系统介绍基础模型研究和应用的全面概述&#xff0c;而且是目前对此方面研究最新的综述。 …

String模拟实现(二)

resize resize的特点是扩容加初始化&#xff0c;如果所给的长度小于空间大小就会删除多余的数据。前面我们实现了reserve&#xff0c;但有这样一个问题&#xff0c;如果reserve的长度小于空间就会导致缩容&#xff0c;而我们知道&#xff0c;string中缩容用的是shrink_to_fit&a…

Python做曲线拟合(一元多项式拟合及任意函数拟合)

目录 1. 一元多项式拟合 使用方法 np.polyfit&#xff08;x, y, deg&#xff09; 2. 任意函数拟合 使用 curve_fit() 方法 实例&#xff1a; &#xff08;1&#xff09;初始化 x 和 y 数据集 &#xff08;2&#xff09;建立自定义函数 &#xff08;3&#xff09;使用自…

Anaconda 下载安装

文章目录 Anaconda下载Anaconda安装 Anaconda下载 进入官网 https://www.anaconda.com/ &#xff0c;往下滑动&#xff0c;找到下载地址 2. 根据自己的系统&#xff0c;选择相应的安装包 直接从官网下载的话&#xff0c;下载速度较慢&#xff0c;可以使用国内镜像快速下载 百…

socket编程之connect()

5 connect() connect&#xff08;&#xff09; 系统调用将文件描述符 sockfd 引用的套接字连接到 addr 指定的地址。 2.1 包含头文件 #include <sys/types.h> #include <sys/socket.h>2.2 函数主体 int connect(int sockfd, const struct sockaddr *ad…

Git 命令行提交代码详细操作

Git 命令行提交代码操作(安装git后&#xff0c;鼠标右键打开Git Bash) 1、查看本地git绑定的用户名和邮箱&#xff1a; git config user.name git config user.email 2、① 修改本地git绑定的用户名和邮箱(全局)&#xff1a; git config --global user.name “Your_userName” …

线程,你是个什么?

线程的基本定义 线程&#xff08;Thread&#xff09;是操作系统能够进行运算调度的最小单位&#xff0c;它被包含在进程&#xff08;Process&#xff09;中&#xff0c;是进程中的实际运作单位。一个线程可以与同一进程中的其他线程共享进程的全部资源&#xff0c;包括内存、文…

Spring Boot 监听器详解

Spring Boot 3.x系列文章 Spring Boot 2.7.8 中文参考指南(一)Spring Boot 2.7.8 中文参考指南(二)-WebSpring Boot 源码阅读初始化环境搭建Spring Boot 框架整体启动流程详解Spring Boot 系统初始化器详解Spring Boot 监听器详解 监听器的介绍 通过前面的几篇文章&#xff0c…

干货分享:用ChatGPT调教批量出Midjourney咒语,出图效率Nice ,附资料。

如何调教ChatGPT让Midjourney出图效率更高 先看测试效果调教经过附资料 Prompts就是AI绘图的核心竞争力。 您是不是觉得用Midjourney生成的图不够完美&#xff1f; 又让ChatGPT去生成Prompt&#xff0c;然后效果还不理想&#xff1f; 其实ChatGPT你给他投喂资料后&#xff0c…