live server在webstorm中的使用

在 WebStorm 中配置一个类似于 VSCode 的 Live Server 的功能，可以通过以下方式实现，通常是通过内置的 WebStorm 功能或者借助外部工具来实现实时刷新。

1. 安装npm

我们首先安装node.js ，地址如下：https://nodejs.org/en/

配置环境变量
新建一个NODE_HOME
然后再在系统变量的【path】中添加
%NODE_HOME%
%NODE_HOME%\node_global
%NODE_HOME%\node_cache


执行命令如下：

node -v
npm -v

2. webstorm下的配置

如果我们在webstorm终端下运行npm命令报错如下：

npm -v
npm : 无法加载文件 D:\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ npm -v
+ ~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess
PS F:\web_project\yc-sys-ui>

原因是系统因 PowerShell 执行策略限制阻止了 npm 脚本的运行。
解决方式如下：

1. ​以管理员身份打开 PowerShell
2. 执行命令如下：

Get-ExecutionPolicy

若返回 Restricted（默认策略），说明脚本执行被禁止

3. 修改为安全策略

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

3. 修改npm镜像源

淘宝：https://registry.npmmirror.com/
腾讯云：https://mirrors.cloud.tencent.com/npm/
CNPM：https://r.cnpmjs.org/

#查询当前使用的镜像源
npm get registry

#设置为淘宝镜像源 
npm config set registry https://registry.npmmirror.com/

#验证设置
npm get registry

#还原为官方源
npm config set registry https://registry.npmjs.org/ 

4. 安装live server

在项目根目录打开终端，运行以下命令来安装 live-server

npm install -g live-server

命令方式启动：

live-server --port=3000

5. npm启动live server

在项目下创建：package.json
加入：

  "scripts": {
    "serve": "live-server --port=3000"
  }

打开 WebStorm 的 运行/调试配置，点击 + 新建一个配置，选择 npm。
具体如下：

效果如下：