简介
file-url-cli是一个npm包，它可以帮助我们将本地文件路径转换为可以在浏览器中访问的URL地址。在前端开发中，有时候需要在页面中展示图片或其他文件，而文件路径在本地却无法直接访问，这时候就需要将文件路径转换为URL地址。file-url-cli就是为了解决这个问题而诞生的。
安装
首先我们需要在本地全局安装file-url-cli，可以通过以下命令进行安装：
npm install -g file-url-cli
使用
安装完之后，我们就可以开始使用file-url-cli。在命令行中，输入以下命令可以查看帮助文档：
file-url --help
输出如下内容：
Usage: file-url [file path] Options: -v, --version output the version number -h, --help display help for command
其中[file path]是指需要转换为URL地址的本地文件路径。我们可以输入文件路径来将其转换为URL地址，例如：
file-url /path/to/file.txt
运行后将会输出类似如下内容的URL地址：
file:///path/to/file.txt
我们可以把这个URL地址复制到浏览器中进行访问，就可以成功访问该文件了。
示例
下面是一个实际的示例，我们可以新建一个名为index.html的HTML文件，并将一张图片放在同级目录下的images文件夹中，文件路径为./images/test.jpg。
-- -------------------- ---- -------
--------- -----
------
------
----------- --- ---------------
-------
------
---- ---------------------------------------
-------
-------在上面的代码中，我们将图片路径直接写成了文件路径，如果直接在浏览器中打开index.html文件，将无法加载图片。这时候我们可以使用file-url-cli来将文件路径转换为可以在浏览器中访问的URL地址。在命令行中输入以下命令：
file-url ./images/test.jpg
运行后将会输出类似如下内容的URL地址：
file:///path/to/images/test.jpg
将这个URL地址复制到代码中，替换原有的文件路径，再次在浏览器中打开index.html文件，就可以成功加载图片了。
总结
file-url-cli是一个非常实用的npm包，可以帮助我们快速将本地文件路径转换为可以在浏览器中访问的URL地址，避免了在前端开发过程中由于本地文件无法访问而导致的问题。通过本文的介绍，相信大家已经可以使用file-url-cli来解决这个问题了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006734f890c4f727758381f