NodeJS | 搭建本地/公网服务器 live-server 的使用与安装

目录

介绍

安装 live-server

安装方法

安装后的验证

环境变量问题

Node.js 环境变量未配置正确

全局安装的 live-server 路径未添加到环境变量

运行测试

默认访问主界面

访问文件

报错信息与解决

问题一:未知命令

问题二:拒绝脚本

公网配置


介绍

Live Server:一个具有实时加载功能的小型服务器,可以使用它来破解html/css/javascript,但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。

安装 live-server

  1. 安装方法

    • 如果你使用的是 npm(Node.js 的包管理器),可以通过以下命令安装 live-server:

      npm install -g live-server

      这里 -g 代表全局安装,安装完成后,你就可以在任何地方使用 live-server 命令了。

    • 如果你使用的是 yarn(另一个流行的包管理器),安装命令是:

      yarn global add live-server
  2. 安装后的验证

    • 安装完成后,可以在命令行中输入 live-server --version 来查看 live-server 的版本号,如果能正常显示版本号,说明安装成功。

环境变量问题

  1. Node.js 环境变量未配置正确

    • 当你安装 Node.js 时,通常会自动配置环境变量。但如果环境变量配置不正确,会导致无法识别 live-server 命令。你可以检查环境变量:

      • 在 Windows 系统中,右键点击“此电脑”或“计算机”,选择“属性”,然后点击“高级系统设置”,在“系统属性”窗口中点击“环境变量”按钮。在“系统变量”区域找到名为“Path”的变量,查看其中是否包含 Node.js 的安装路径(如 C:\Program Files\nodejs\)。如果没有,可以手动添加。

      • 在 macOS 或 Linux 系统中,可以使用命令 echo $PATH 查看环境变量。如果 Node.js 的安装路径不在其中,可以编辑 ~/.bash_profile~/.bashrc 文件,添加如下内容(以 Node.js 安装在 /usr/local/bin/node 为例):

        export PATH=$PATH:/usr/local/bin/node

        然后执行 source ~/.bash_profilesource ~/.bashrc 使配置生效。

  2. 全局安装的 live-server 路径未添加到环境变量

    • 当你使用 npm 全局安装 live-server 时,它会被安装到 npm 的全局安装目录。这个目录可能不在系统的环境变量中。你可以通过以下命令找到 npm 的全局安装目录:

      npm root -g

      然后将这个目录添加到系统的环境变量中,具体操作同上。

运行测试

live-server --port=8080

默认访问主界面

访问文件

报错信息与解决

问题一:未知命令

PS D:\Desktop\chen> live-server -port=1111 live-server : The term 'live-server' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + live-server -port=1111 + ~~~~~~~~~~~ + CategoryInfo: ObjectNotFound: (live-server:String) [], Com mandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException

其实就是没装所以不知道是啥..去开头的地方装一遍就行了

问题二:拒绝脚本

PS D:\Desktop\chen> npm install -g live-server 
npm : File D:\nodejs\npm.ps1 cannot be loaded 
because running scripts is disabled on this system. 
For more information, see about_Execution_Policies 
at https:/go.microsoft.com/fwlink/?LinkID=135170. 
At line:1 char:1 + npm install -g live-server + ~~~ 
+ CategoryInfo : SecurityError: (:) [], 
PSSecurityException + FullyQualifiedErrorId :UnauthorizedAccess PS D:\Desktop\chen> yarn global 
add live-server yarn : File C:\Users\Administrator\AppData
\Roaming\npm\yarn.ps1 cannot be loaded because running 
scripts is disabled on this system. For more information, 
see about_Execution_Policies at https:/go.microsoft.com/
fwlink/?LinkID=135170. At line:1 char:1 + yarn global add 
live-server + ~~~~ + CategoryInfo : SecurityError: (:) [], 
PSSecurityException + FullyQualifiedErrorId : 
UnauthorizedAccess PS D:\Desktop\chen>

权限不够需要提权,且允许脚本写入

出现这个错误是因为 PowerShell 的执行策略设置得过于严格,阻止了脚本的运行。你可以按照以下步骤调整 PowerShell 执行策略来解决这个问题:

  1. 以管理员身份运行 PowerShell

    • 右键点击开始菜单,选择“Windows PowerShell (管理员)”。

  2. 查看当前执行策略

    • 在打开的 PowerShell 窗口中,运行以下命令来查看当前的执行策略:

      Get-ExecutionPolicy
    • 如果结果显示为 Restricted,则需要更改此设置以允许脚本运行。

  3. 设置新的执行策略

    • 建议将执行策略修改为 RemoteSigned,该模式下仅允许本地创建的脚本无条件执行;对于来自互联网或其他计算机上的脚本,则需具备有效的数字签名才能被执行。通过以下命令完成变更:

      Set-ExecutionPolicy RemoteSigned
    • 系统可能会提示确认操作,请按指示同意更改。

  4. 验证更新后的执行策略

    • 再次使用 Get-ExecutionPolicy 命令来验证新设定是否生效。

完成以上步骤后,尝试重新运行 npm install -g live-serveryarn global add live-server 命令,应该就可以成功安装 live-server 了。

公网配置

可以利用第三方 内网穿透软件完成:樱花,花生壳


有喜欢的小伙伴可以去 vx公棕号: wmcode 看看,或许有你想要的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/3591.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

opencv图像基础学习

2.3图像的加密解密 源码如下: import cv2 import numpy as np import matplotlib.pyplot as plt def passImg():imgcv2.imread(./image/cat.jpg,0)h,wimg.shape#生成一个密码,加密key_imgnp.random.randint(0,256,size(h,w),dtypenp.uint8)img_addmcv2…

《C++11》中的显式虚函数重载:深入理解与应用

在C编程中,虚函数是一种强大的工具,它允许我们实现多态。通过虚函数,我们可以在派生类中重写基类的函数,从而实现运行时多态。然而,当我们在派生类中重载虚函数时,可能会遇到一些问题。在C11中,…

计算机网络 (41)文件传送协议

前言 一、文件传送协议(FTP) 概述: FTP(File Transfer Protocol)是互联网上使用得最广泛的文件传送协议。FTP提供交互式的访问,允许客户指明文件的类型与格式(如指明是否使用ASCII码&#xff0…

服务器迁移MySQL

由于公司原有的服务器不再使用,需要将老的服务器上的MySQL迁移到新的服务器上,因此需要对数据进行备份迁移,前提是两台服务器已安装相同版本的MySQL,这里就不再讲解MySQL的安装步骤了,可以安装包、可以在线下载、可以容…

IoTDB 数据类型相关问题

指定数据类型 问题 1 IoTDB 通过 tools/import-data.sh 导入数据时,发现默认推断类型配置没有生效,请问是什么原因? 现象 解决方案 通过 tools/import-data.sh 命令导入数据时,需要指定 -typeInfer 参数,用于指定类…

4.Spring AI Prompt:与大模型进行有效沟通

1.什么是提示词 在人工智能领域,提示词(Prompt)扮演着至关重要的角色,它宛如一把精准的钥匙,为 AI 大模型开启理解之门。作为向模型输入的关键信息或引导性语句,提示词能够助力模型迅速洞悉问题需求&#…

【12】Word:张老师学术论文❗

目录 题目 ​NO2 NO3 NO4 NO5 NO6 NO7.8 题目 NO2 布局→页面设置→纸张:A4→页边距:上下左右边距→文档网格:只指定行网格→版式:页眉和页脚:页脚距边界:1.4cm居中设置论文页码:插入…

MyBatisPlus学习笔记

To be continue… 文章目录 介绍快速入门入门案例常用注解常用配置 核心功能条件构造器自定义SQLService接口 介绍 MyBatisPlus只做增强不做改变,引入它不会对现有工程产生影响。只需简单配置,即可快速进行单表CRUD操作,从而节省大量时间。…

Python根据图片生成学生excel成绩表

学习笔记: 上完整代码 import os import re from openpyxl import Workbook, load_workbook from openpyxl.drawing.image import Image as ExcelImage from PIL import Image as PilImage# 定义图片路径和Excel文件路径 image_dir ./resources/stupics # 图片所…

DPIN与CESS Network达成全球战略合作,推动DePIN与AI领域创新突破

2025年1月13日, DPIN电竞酒店首次亮相,并于马来西亚马六甲和新加坡成功举办《A*STAR前沿考察盛典》。DPIN基金会透露,过去两个月,DPIN成功验证了去中心化GPU算力的首个应用,证明电竞酒店可成为快速落地的创新场景。 活动期间&…

Red Hat8:搭建FTP服务器

目录 一、匿名FTP访问 1、新建挂载文件 2、挂载 3、关闭防火墙 4、搭建yum源 5、安装VSFTPD 6、 打开配置文件 7、设置配置文件如下几个参数 8、重启vsftpd服务 9、进入图形化界面配置网络 10、查看IP地址 11、安装ftp服务 12、遇到拒绝连接 13、测试 二、本地…

K8S开启/关闭审计日志

K8S默认禁用审计 开启/关闭 k8s 审计日志 默认 Kubernetes 集群不会输出审计日志信息。通过以下配置,可以开启 Kubernetes 的审计日志功能。 准备审计日志的 Policy 文件配置 API 服务器,开启审计日志重启并验证 准备审计日志 Policy 文件 apiVersio…

OpenCV基础:获取子矩阵的几种方式

目录 相关阅读 方法一:使用切片操作 方法二:使用高级索引 方法三:使用条件筛选 方法四:使用 numpy 的 take 函数 相关阅读 OpenCV基础:矩阵的创建、检索与赋值-CSDN博客 OpenCV基础:图像运算-CSDN博客…

深度学习项目--基于LSTM的火灾预测研究(pytorch实现)

🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊 前言 LSTM模型一直是一个很经典的模型,这个模型当然也很复杂,一般需要先学习RNN、GRU模型之后再学,GRU、LSTM的模型讲解将…

计算机网络-物理层

重点内容 物理层的任务几种常用的信道复用技术几种常用的宽带接入技术,重点是FTTx 目录 重点内容 一.物理层的基本概念 二.数据通信基础知识 2.1通信系统模型 2.2信道 2.2.1调制 调制的两大类及其特点 1. 基带调制(Baseband Modulation / Coding…

在服务器上增加新网段IP的路由配置

在服务器上增加新网段IP的路由配置 前提条件步骤一:检查当前路由表步骤二:添加新路由步骤三:验证新路由步骤四:持久化路由配置脚本示例结论在网络管理中,路由配置是一项基本且重要的任务。它决定了数据包在网络中的传输路径。本文将详细介绍如何在服务器上增加新的路由配置…

无降智o1 pro——一次特别的ChatGPT专业模式探索

这段时间和朋友们交流 ChatGPT 的使用心得,大家都提到一个很“神秘”的服务:它基于 O1 Pro 模型,能够在对话里一直保持相对高水平的理解和回复,不会突然变得“降智”。同时,整体使用还做了免折腾的网络设置——简单一点…

如何在 Google Cloud Shell 中使用 Visual Studio Code (VS Code)?

Google Cloud Shell 是一个基于浏览器的命令行界面,它提供了一个临时的虚拟机环境,允许开发者在没有本地环境配置的情况下使用 Google Cloud 的各种服务。它还提供了一个免费的 5GB 存储空间以及可以在其中执行所有 Google Cloud 操作的命令行界面。 Vis…

ToDesk设置临时密码和安全密码都可以当做连接密码使用

ToDesk 在各领域办公都已经是非常常见了 为了安全 ToDesk 设置了连接密码,想连接 需要输入远程码和连接密码 我们刚打开 系统默认给我们用的是临时密码,安全性确实很强 和定时Tokey一样,固定时间切换。 但是 如果我们要经常连接这个电脑&a…

语义检索效果差?深度学习rerank VS 统计rerank选哪个

前段时间我开发了一个用白话文搜索语义相近的古诗词的应用(详见:《朋友圈装腔指南:如何用向量数据库把大白话变成古诗词》),但是有时候搜索结果却不让人满意,排名靠前的结果和查询的语义没啥关系&#xff0…