html文件直接可以浏览器打开，为什么很多人选择本地服务器localhost打开？有什么不一样吗？

Question

html文件直接可以浏览器打开，为什么很多人选择本地服务器localhost打开？有什么不一样吗？除了脚本文件，感觉没必要本地服务器打开，有什么原因吗？

Answer 1

最直接的区别，很容易注意到，一个是file协议，另一个是http协议。file协议更多的是将该请求视为一个本地资源访问请求，和你使用资源管理器打开是一样的，是纯粹的请求本地文件。而http请求方式则是通过假架设一个web服务器，解析http协议的请求然后向浏览器返回资源信息。我们所开发的html文件最后必定是会以网页的形式部署在服务器上，通过http协议访问，所以我们开发中也尽可能模拟线上环境，架设本地服务器，来避免file协议与http协议实现过程中的某些差异性，如某些API的差异、跨域请求的差异等。举个最容易验证的例子：在页面引入一张绝对路径的图片，即'/image/example.png'，然后分别通过这两种方式打开页面，file协议会将资源请求到根路径，而http协议虽然也会请求到根路径，但是是相对本地架设的服务器的根路径，一般也就是项目文件夹的路径。

Answer 2

尽量简单解释，希望能看懂：是否需要用本地服务器打开 html 分几种情况：html 中是否是纯静态模板页纯静态模板页指页面内没有“请求服务器”获取数据，展示的是为了布局占位临时写的“假”数据。比如，“姓名”、“年龄”，后端数据还没完成，前端先写模板页，随便写“姓名： 张三”、“年龄：18”，先把页面布局和样式完成。这个阶段不需要开启本地服务器html 中引用的静态资源是否需要构建工具打包编译比如 js 使用了 ES6 新特性、css 使用了 less 编写等，这时可能需要使用 Webpack 等工具进行编译。这时，一般需要启动一个本地 node.js 服务去执行编译和预览 开发中是否用到“实时刷新，同步预览”如果开发中修改文件不想每次都点击刷新或按 F5，保存时自动刷新，可以借助一些工具，比如 livereload、browserSync 等。用这些工具，需要启动一个本地服务开发中是否用到多终端调试如果开发的静态页面想在某品牌手机真机上看显示效果，调试兼容性问题，除了最笨的把页面和静态资源发送到手机上，还以可以起一个本地服务，电脑与手机连接到同一 Wifi 下，用手机访问本地服务 loalhost 对应的内网 ip 地址即可