VSCode运行Layui项目

最新推荐文章于 2024-05-31 09:51:11 发布

HikL[爱心]

最新推荐文章于 2024-05-31 09:51:11 发布

阅读量4.7k

点赞数

CC 4.0 BY-SA版权

文章标签： vscode

原文链接：https://my.oschina.net/u/4261593/blog/3536717

本文详细介绍了如何在Visual Studio Code(VSCode)中配置和运行Layui前端项目。首先，需要安装Debugger for Chrome插件以实现浏览器调试。接着，配置launch.json文件，设置运行的URL和文件路径。虽然这样可以直接打开项目，但并未启动服务器。通过在VSCode的调试控制台以管理员身份运行`npm install -g live-server`安装本地服务器。安装完成后，使用`live-server`启动服务，解决可能的权限问题，最终在浏览器中预览并调试项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VSCode运行Layui项目

首先在VSCode 上装一个插件：Debugger for Chrome ，如下图所示：在搜索框中输入Debugger for Chrome 然后点击安装
配置文件，从左到右依次点击红圈中的按钮，然后出现launch.json文件，在里面添加配置信息
配置好之后，选择调试方式，如图所示，点击下拉箭头会有之前配置好的名称，这里是“使用本机chrom调试.
选择好名称之后，直接按F5，就会弹出浏览器界面，就可以进行调试了

在这里插入图片描述

配置如下：

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "使用本机chrom调试",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "file":"${workspaceRoot}/view/index.html", //这个是在浏览器中要运行的文件的路径，					每次运行不同项目的时候需要修改里面的运行路径（需要改成你自己的路径）
        }
    ]
}

以上配置还没有开启服务器，上面的操作相当于直接在浏览器中打开界面
在这里插入图片描述

开启本地服务器

1、打开VS Code，然后点击“查看” =》“调试控制台”或者直接按快捷键 ctrl+shift+y调出控制面板
以管理员的身份运行vs code
在终端输入

npm install -g live-server

在这里插入图片描述

3、安装完成后会出现live-server的版本信息，表示安装成功

4、在终端输入：live-server会出现下面的信息

如果报错： live-server : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\live-server.ps1，因为在此系统上禁止运行脚本 则需要在终端中输入 set-ExecutionPolicy RemoteSigned 和 y

然后直接在浏览器弹出的界面
在这里插入图片描述