VS code前端编辑浏览器自动刷新

今天药忘吃喽~ 2022-11-29 14:28 303阅读 0赞

# 背景 #

###    平时在写前端代码的时候，为了提高效率，修改代码后能在浏览器中同步查看修改内容。下面介绍下不用再浏览器中安装任何插件，只需要在vs code中安装live-serve即可，告别Livereload。 ###

# 解决方案 #

1、安装live-server，在vs code终端执行

> npm install live-server -g

2、启动live-server，在vs code终端执行

> live-serve

3、右键html文件，选择如下选项，会在你的默认浏览器中打开此html文件；然后就可以愉快的编写啦。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rpbmdob25neXU1MjA_size_16_color_FFFFFF_t_70][]

--------------------

## 可能遇到的异常情况 ##

### 异常1 ###

无法加载文件 E:\nodejs\node_global\webpack.ps1，因为在此系统上禁止运行脚本有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170

解决办法：

>     1.退出软件，以管理员身份运行vs code
>     
>     2.在vs code终端执行：get-ExecutionPolicy
>       显示Restricted（表示状态是禁止的）
>     
>     3.在vs code终端执行：set-ExecutionPolicy RemoteSigned
>     
>     4.在vs code终端执行：get-ExecutionPolicy
>       显示RemoteSigned表示开启

### 异常2 ###

Error: listen EACCES 0.0.0.0:8080

解决办法：

>     live-server --port=7998

### 异常3 ###

执行第3步时vs code提示：Open a folder or workspace… (File -> Open Folder)

解决办法：

关闭vs code重新打开，选择File->Open Folder...，再执行上面第3步就不会报错了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rpbmdob25neXU1MjA_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rpbmdob25neXU1MjA_size_16_color_FFFFFF_t_70]: /images/20221124/e58530ce89454c62ba15c26e393f2fdb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rpbmdob25neXU1MjA_size_16_color_FFFFFF_t_70 1]: /images/20221124/82a22a7d450740bca5f453d5df976184.png