Vscode 中新手小白使用 Open With Live Server 的坑

news2024/11/15 6:45:52

背景

最近在家学习尝试前端项目打包的一些事项,既然是打包,那么肯定就会涉及到对打包后文件的访问,以直观的查看打包后的效果

那么肯定就会使用到 Vscode 中 Open With LIve Server 这个功能了,首先这个是一个叫 Live Server 的插件提供的能力,使用之前需要先安装插件,安装插件之后就可以使用了

使用报错,提示文件找不到

一切准备就绪,然后对搭建的项目进行打包,成功打包后一般会在项目的根目录下生成一个 dist 的文件夹,问价夹里就是打包后的全部东西,然后我找到 dist 文件下的 index.html 的入口文件,通过 Open With LIve Server 的方式将其打开在浏览器中访问想看看效果,但是发现其报错了,报错如下:

报错的问题就是没有找到 /static 这个路径下的资源,于是自己就去查看了打包的 dist 文件夹,发现所有的文件资源都是齐全的,index.html 文件中对资源的应用路径也都是正确的,如下图:

index.html 中的资源引入路径: 

static文件中的资源:

然后自己就排查了一番,发现浏览器访问 Live-Server 插件本地启动服务时,资源项中只有 index.html 文件,并没有 static 文件夹里面的静态资源,如下图:

所以报错是肯定的

解决办法

发现报错后,换了一起思路,就是将整个 dist 文件通过 Live-Server 插件打开,发现整个打包后的效果就可以查看了,这时候浏览器的资源项也是正确的了

总结

其实问题很小,就是打开方式不对,但是对于新手来说还是有一定的迷惑性,所以写一下,希望能对大家有帮助

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

18、Python如何读写csv文件

先简单介绍一下 csv 格式的文件是什么意思。先看一下百度百科怎么说的。 逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据&…

企业绿色信贷水平研究:全国与分省份数据分析(2005-2021年)

企业绿色信贷水平指的是企业在信贷活动中,根据环保和产业政策,对环保企业进行扶持,对污染企业进行资金遏制的能力。 2005-2021年 上市企业绿色信贷水平全国、分省份数据(原始数据和计算方法)https://download.csdn.ne…

鸿蒙读书笔记2:《鸿蒙操作系统设计原理与架构》

2. OS基础平台部件化 (1)内核层 内核层包括内核部件和HDF驱动框架部件。当前已提供LiteOS-M、 LiteOS-A、Linux和UniProton这4种内核部件,未来还可增加更多类 型的内核部件。LiteOS、Linux内核部件可以按需部署在不同设备之 上,内…

腾讯百度阿里华为常见算法面试题TOP100(3):链表、栈、特殊技巧

之前总结过字节跳动TOP50算法面试题: 字节跳动常见算法面试题top50整理_沉迷单车的追风少年-CSDN博客_字节算法面试题 链表 160.相交链表 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode(int x) …

29 线性表 · 队列

目录 一、概念与结构 (一)概念 1、队列 2、入队列 3、出队列 (二)底层结构 二、队列的实现 三、队列的算法题 (一)用队列实现栈 (二)用栈实现队列 (三&#xf…

基于AG32 的USB转以太网方案

如何通过USB转以太网标准模块? AG32支持USB FSOTG和以太网MAC,并且提供了标准例程,包括网络Lwip和USB的开发例程,上层应用调tinyUSB的接口即可。 以下是AG32VF407VG的引脚定义,支持USB外设。 LQFP-100Pin nameAG32VFx…

简单了解Maven与安装

Maven 1.Maven 简介 Maven 是 Apache 软件基金会(国外组织,专门维护开源项目)的一个开源项目, 是一个优秀的项目构建工具, 它用来帮助开发者管理项目中的 jar, 以及 jar 之间的依赖关系(在A.jar文件中用到了B.jar)、 完成项目的编译&am…

圆环加载效果

效果预览 代码实现 from PyQt5.QtCore import QSize, pyqtProperty, QTimer, Qt, QThread, pyqtSignal from PyQt5.QtGui import QColor, QPainter from PyQt5.QtWidgets import QApplication, QWidget, QHBoxLayout, QPushButton, QVBoxLayout, QLabel, QGridLayoutclass Cir…

Rust使用Actix-web和SeaORM库开发WebAPI通过Swagger UI查看接口文档

本文将介绍Rust语言使用Actix-web和SeaORM库,数据库使用PostgreSQL,开发增删改查项目,同时可以通过Swagger UI查看接口文档和查看标准Rust文档 开始项目 首先创建新项目,名称为rusty_crab_api cargo new rusty_crab_apiCargo.t…

Nuxt Kit 中的页面和路由管理

title: Nuxt Kit 中的页面和路由管理 date: 2024/9/17 updated: 2024/9/17 author: cmdragon excerpt: 摘要:本文介绍了Nuxt Kit中页面和路由管理的高级功能,包括extendPages自定义页面路由、extendRouteRules定义复杂路由逻辑及addRouteMiddleware注册路由中间件。通过这…

Html css样式总结

1.Html css样式总结 1.1. 定位position 布局是html中非常重要的一部分,而定位在页面布局中也是使用频率很高的方法,本章节为定位在布局中的使用技巧和注意事项。   position定位有4个属性,分别是static(默认),absol…

第四天旅游线路预览——从换乘中心到白哈巴村

第四天:从贾登峪到喀纳斯风景区入口,晚上住宿贾登峪; 换乘中心有4 路车,喀纳斯③号车,去白哈巴村,路程时长约40分钟; 将上面的的行程安排进行动态展示,具体步骤见”Google earth st…

用Spring Boot搭建的读书笔记分享平台

第1章 绪论 1.1课题背景 计算机的普及和互联网时代的到来使信息的发布和传播更加方便快捷。用户可以通过计算机上的浏览器访问多个应用系统,从中获取一些可以满足用户需求的管理系统。网站系统有时更像是一个大型“展示平台”,用户可以选择所需的信息进入…

【Spring Security系列】如何用Spring Security集成手机验证码登录?五分钟搞定!

作者:后端小肥肠 🍇 我写过的文章中的相关代码放到了gitee,地址:xfc-fdw-cloud: 公共解决方案 🍊 有疑问可私信或评论区联系我。 🥑 创作不易未经允许严禁转载。 姊妹篇: 【Spring Security系列…

拖拽排序的实现示例demo

拖拽排序的实现示例demo 文章说明核心代码示例效果展示 文章说明 文章主要为了学习拖拽排序的实现思路,并且采用此示例效果来进一步理解Flip动画的使用 参考渡一前端袁老师的讲解视频 核心代码 页面源码,拖拽排序的实现代码并不复杂,但是可以…

我的标志:奇特的头像

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>与妖为邻</title><style>figure.log…

C++11(4)

万众瞩目的C11特辑来了&#xff0c;本章将继续讲解C11更新的内容&#xff0c;不过C11的内容也快接近尾声了。 目录 10。lambda表达式 11。lambda捕捉列表[] 捕捉列表说明 lambda捕捉列表实际应用 10。lambda表达式 #include<iostream> using namespace std; #inclu…

手把手教你:在微信小程序中加载map并实现拖拽添加标记定位

本文将为大家详细介绍如何在微信小程序中加载map组件&#xff0c;并实现拖拽标记定位功能。 实现步骤 1、首先&#xff0c;我们需要在项目的app.json文件中添加map组件的相关配置。如下所示&#xff1a; {"pages": ["pages/index/index"],"permiss…

robomimic基础教程(三)——自带算法

robomimic自带几个高质量的离线学习算法的实现&#xff0c;包括模仿学习和强化学习&#xff0c;并提供相关工具来辅助你轻松构建自己的学习算法。 一、模仿学习&#xff08;Imitation Learning&#xff09; 1. BC (Behavioral Cloning) Vanilla Behavioral Cloning, 旨在通过…

使用knn算法对iris数据集进行分类

程序功能 使用 scikit-learn 库中的鸢尾花数据集&#xff08;Iris dataset&#xff09;&#xff0c;并基于 KNN&#xff08;K-Nearest Neighbors&#xff0c;K近邻&#xff09;算法进行分类&#xff0c;最后评估模型的准确率。 代码 from sklearn import datasets# 加载鸢尾…