不推荐双击 .html 文件预览网页

目录

1、不推荐双击查看 .html 文件

2、使用 parcel 起一个本地服务

---

1、不推荐双击查看 .html 文件

html 中的 <a> 标签可以跳转到指定网页，或者当前页面的指定锚点位置，但是设置 <a> 标签的 href 属性时是有讲究的，首先来看一下 <a> 标签的使用场景。

如：<a href="/a/b/c.html">跳转</a> ，<a> 标签的 href 属性取值可以是网址，可以是文件路径，也可以是相对路径过绝对路径，如果是绝对路径的话，这里会有一个坑，当你双击打开有 href 取值为绝对路径的 html 页面时，该绝对路径会基于系统根目录去找，而不是基于你当前的项目去找，这要就会导致超链接跳转的地方和我们预期的不一致。

        解决方法：（1）绝对路径会出问题，可以写相对路径，这样双击打开 html 文件就不会有问题，但是不推荐这样做，因为如果是访问网址就会出现一些问题，推荐使用下面这种方式。

（2）不要双击打开 .html 文件，可以全局安装 yarn/npm global add http-server，然后通过 http-server . -c-1 命令起一个本地服务，注意在地址栏加上 html 的文件访问路径，即可访问（可以直接缩写成 hs 启动页面）。或者安装：yarn/npm global add parcel，然后通过 parcel src/index.html 的方式实现预览。

2、使用 parcel 起一个本地服务

这里主要说一下如何用 parcel 来预览 html 文件。引用 parcel 中文网 的一句话：" Parcel 是 Web 应用打包工具，适用于经验不同的开发者。它利用多核处理提供了极快的速度，并且不需要任何配置。"  安装步骤如下：

//Yarn：
yarn global add parcel-bundler

//npm
npm install -g parcel-bundler

Parcel 内置了一个当你改变文件时能够自动重新构建应用的开发服务器，而且为了实现快速开发，该开发服务器支持热模块替换。只需要在入口文件指出：

parcel index.html

现在在浏览器中打开 http://localhost:1234/。如果模块热重载没有生效，你可能需要配置你的编辑器。你也可以使用 -p <port number> 选项覆盖默认的端口。 如果没有自己的服务器可使用开发服务器，或者你的应用程序完全由客户端呈现。