在前端开发中，我们常常需要在页面中引入一些 JavaScript、CSS 或者图片等资源文件。通常情况下我们会使用资源的绝对路径或者是相对路径来加载它们，但是在 HTTPS 页面中使用绝对路径甚至相对路径可能会存在一些问题。
这时，我们就需要使用 protocol-relative URL 来解决这个问题。简单来说，protocol-relative URL 是指既不使用 http 协议也不使用 https 协议，而是通过使用“//”来让浏览器自动匹配当前页面所使用的协议。
而 protocol-relative-replace-loader 正是一个可以帮助我们处理 protocol-relative URL 这个问题的 npm 包。
安装
你可以使用 npm 来安装 protocol-relative-replace-loader：
npm install protocol-relative-replace-loader --save-dev
使用
webpack 配置
为了使用 protocol-relative-replace-loader，你需要在 webpack 的配置文件中加入相关配置项：
-- -------------------- ---- -------
-
------- -
------ -
-
----- --------------
------- -----------------------------------
-------- ---------------
-------- -
--------- -------
-
-
-
-
-其中，test 选项用于匹配需要处理的文件，上面的配置例子中匹配了 js 和 vue 文件；loader 选项则指定了使用 protocol-relative-replace-loader；exclude 用于排除不需要进行处理的文件，例如 node_modules 文件夹中的代码；最后，我们可以通过 options 选项来配置 protocol-relative-replace-loader 的一些参数，其中 protocol 参数用于指定所需要替换的 URL 的 protocol，默认为当前页面的 protocol。
JavaScript 中的 URL
在 JavaScript 代码中引入资源时，我们通常需要使用 URL 类来构建 URL。但是，由于目前的 URL 类并不支持 protocol-relative URL，所以我们需要手动实现。
举个例子，在以下代码中，我们手动实现了 protocol-relative URL：
const baseUrl = '//some-cdn.example.com';
const url = new URL('/path/to/resource', `https:${baseUrl}`);我们在构造 URL 对象时，将 protocol 参数设置为 'https:'，然后将 baseUrl 填入 host 参数中，并使用 '//' + baseUrl 的方式来构建我们需要的 protocol-relative URL。
而使用了 protocol-relative-replace-loader 后，我们可以直接使用以下代码来构造相应的 URL：
const baseUrl = '//some-cdn.example.com';
const url = new URL('/path/to/resource', baseUrl);这样做的好处在于，我们可以避免手动处理 URL 的过程，并有效减少代码的冗余程度。
Vue 中的图片
在 Vue 中加载图片，我们通常直接使用 img 标签，然后通过绑定 src 属性来实现。但是，在使用 protocol-relative URL 的情况下，我们需要使用绑定的方式来实现它。
例如，我们需要使用一张 protocol-relative URL 指定的图片，我们可以使用以下代码来实现：
-- -------------------- ---- -------
----------
-----
---- ------------- --
------
-----------
--------
------ ------- -
------ -
------ -
------- ----------------------------------
-
-
-
---------通过上面的代码，我们可以在 Vue 中使用 protocol-relative URL 来加载图片，并且让它自动适应当前页面所使用的协议。但同样需要注意的是，我们需要使用绑定的方式来实现它，而不能直接在 src 属性中使用 protocol-relative URL。
总结
protocol-relative-replace-loader 在前端开发中几乎是必不可少的一个工具。使用它可以大量减少我们手动处理 URL 的工作量，同时让我们的代码更加精简、易读。当然，为了更好的使用它，我们需要了解一些相关的技术及其应用，才能真正应对实际开发中所遇到的问题。
示例代码如下（webpack 配置省略）：
-- -------------------- ---- -------
----------
-----
---- ------------- --
------
-----------
--------
------ ------- -
------ -
------ -
------- ----------------------------------
-
-
-
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005517281e8991b448ceb85