由一串链接引发的问题

19 阅读4分钟

前言

老板最近有个需求,通俗点说呢 就是给个网址还一个项目

还是我太年轻,老板说要源码,我开始想当然了,就把html那个copy下来就行了啊,so easy

后来老板说线上的资源都要下载下来,还有一些文件名 class名里面出现的随机数都改掉,我这个时候意识到应该和我想的不同啊!!!!!!

正文

言归正传啊,这个过程中我遇到了些有点点傻逼的问题,就记录下来

1. 突然发现只有html忘记咋跑起来到浏览器了

因为我之前安装过一些插件,"open in brower" ,直接vscode 右键 "open in defautl brower" 就运气起来了,但是里面的一些线上资源,js文件加载不出来了,咔咔一顿报跨域

于是我想到了 另一个插件 "live server",安装之后 直接vscode 右键 "open with live server",建立本地服务,正常就跑起来了,就ok了

于是我特地整理了两者的区别
"Open with live server" 和 "Open in default browser" 是两种不同的方式来打开本地文件
1. Open with live server:

通俗来说就是在你本地启动一个临时的服务器,这个服务器会模拟 HTTP 或 HTTPS 请求,可以避免一些浏览器安全策略限制,以及跨域请求等问题

2. Open in default browser:

相当于打开本地文件,在这种情况下,文件会以 file:// 协议的形式直接在浏览器中打开,而不经过服务器。这种方式可能会受到一些浏览器安全策略的限制

总的来说,使用 "Open with live server" 可以更方便地进行本地开发和测试,因为它提供了一个模拟服务器的环境,可以避免一些与直接打开文件时可能遇到的问题

为什么会纠结这个问题???

在跑项目的时候,因为是html+外部js文件,我开始用 Open in default browser,发现很多通过js获取到的比如图片,轮播图等等都无法出现,百度之后推荐用 Open with live server,果然就跑起来了

于是又有了新问题? 为什么必须要起服务才能跑??

JavaScript 文件需要通过某种形式的服务器才能在浏览器中正常运行的原因有几个:

  1. 同源策略(Same-Origin Policy)

  2. 跨域请求:

  3. 文件协议限制:

总的来说:当你在浏览器中打开本地的 HTML 文件时,通常情况下,JavaScript 代码是可以运行的。但是,如果你的 JavaScript 代码依赖于某些网络请求、跨域资源、本地存储或其他需要服务器环境支持的功能时,可能会遇到问题。所以直接用Open with live server更合适

2.上线部署的代码都是压缩编译之后的啊,要了无用啊

这个需求很无理对吧!!

妄想通过一个链接,直接拿到别人的全套代码,但是我之前也没有弄过,所以,我直接回复ok,等到接手之后,才发现真的贼坑

1.要知道一旦部署上线的网页,那么你看到的都是生产环境下的代码

这些代码都是经过编译,甚至有些公司的代码还会加密,不是一般人能拿到的

2.最直观的是可以看到它的html

这个是静态文件,ctrl+u 可以直接获取到,这个网页当前页面的全部信息,这个就是个乱锅炖啊

3.js文件 是被压缩处理过的

这个html中会有很多是引入的js文件,这些js文件时经过处理的,代码的压缩、优化,以及资源文件的合并、压缩的,有些还比较多,一个个下载很繁琐,可以直接利用插件 插件Resources Saver 统一下载 ,但是!!! 这个js文件是压缩编译之后的,你想在里面改东西,难如登天啊

最后 好奇问一下,这种编译之后的文件拿到手,到底有啥用??