Vue.js快速入门番外篇——Live Server插件的简介、安装与使用

最新推荐文章于 2025-04-01 17:09:38 发布

李阿昀

最新推荐文章于 2025-04-01 17:09:38 发布

阅读量1.8w

点赞数 22

分类专栏： Vue.js学习

本文链接：https://blog.csdn.net/yerenyuan_pku/article/details/109479730

版权

Vue.js学习专栏收录该内容

3 篇文章

订阅专栏

简介

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

安装

第一步，打开VSCode开发工具，在VSCode扩展中搜索Live Server，然后安装即可。
在这里插入图片描述
Live Server插件安装成功之后，应该就是下面这个样子了。

第二步，按Ctrl+Shift+P快捷键打开命令面板，输入settings，然后在下拉列表中选中首选项: 打开默认设置(JSON)。

这时，你应该就会看到Live Server插件的默认设置。

第三步，在打开的defaultSettins.json文件中搜索liveServer配置项，你将会看到Live Server插件的默认设置，例如有本地服务的端口号、默认打开的浏览器等等，如下图所示。
在这里插入图片描述
如果你想修改ive Server插件的默认设置，那么可以直接在defaultSettins.json文件中进行修改。

其实，还有一种修改Live Server插件的默认设置的方式，而且一般都推荐使用这种方式，即在用户设置中进行配置，以覆盖Live Server插件的默认设置。具体做法就是按下Ctrl+Shift+P快捷键打开命令面板，然后输入settings，接着在下拉列表中选中首选项: 打开设置。
在这里插入图片描述
最后，在打开的settins.json文件中添加如下内容来覆盖Live Server插件的默认设置。

{
    "liveServer.settings.port": 8080, // 设置本地服务的端口号
    "liveServer.settings.root": "/", // 设置根目录，也就是打开的文件会在该目录下找
    "liveServer.settings.CustomBrowser": "chrome", // 设置默认打开的浏览器
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
    "liveServer.settings.NoBrowser": false,
    "liveServer.settings.ignoredFiles": [ // 设置忽略的文件
        ".vscode/**",
        "**/*.scss",
        "**/*.sass"
    ]
}

修改之后的效果就像下图所示的这样。
在这里插入图片描述
第四步，设置完毕后，重启VSCode。

使用

在VSCode中使用Live Server插件有一个小小的要求，那就是项目文件夹要单独出现在VSCode的侧边栏，就像下面这样。
在这里插入图片描述
如果你要是直接硬挺挺地单独打开一个html页面，使用Live Server插件在浏览器中浏览该页面时，压根就打不开浏览器让你观看网页的效果，而且在VSCode右下角会弹出一个错误提示框，如下图所示。

因此，写项目时大家最好留一个要编辑的项目文件夹在VSCcode侧边栏，这样清清爽爽写代码，心里也会舒畅些。

回到主题，如何在VSCode中使用Live Server插件呢？其实，很简单，打开需要浏览的文件，在文件内容的随便什么位置右键，然后在弹出的下拉列表中点击Open with Live Server即可，如下图所示。
在这里插入图片描述
以上vue基础.html文件的内容，我们大可不必在意，学到后面，你自然而然就会知道什么意思了，这里只须复制其中的内容到你要编辑的文件即可。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="with=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Vue基础</title>
    </head>

    <body>
        <div id="app">
            {{ message }}
        </div>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    message:"你好，Vue!"
                }
            })
        </script>
    </body>
</html>