在前端开发中，我们经常会使用 ES6 的 import 语句来引入模块。然而，有时候我们会遇到 import 引用不到本地文件的问题，这给我们的开发带来了很多不便。本文将介绍如何解决这个问题，并提供一些示例代码。
问题描述
当我们使用 import 语句引入本地文件时，有时候会遇到以下错误：
Uncaught TypeError: Failed to resolve module specifier 'path/to/module.js'. Relative references must start with either "/", "./", or "../".
这个错误提示告诉我们，import 引用本地文件时，必须以 "/"、"./" 或 "../" 开头。如果我们不按照这种方式引用本地文件，就会出现上述错误。
解决方法
为了解决这个问题，我们需要明确 import 引用本地文件的规则。我们可以使用以下方法来引用本地文件：
- 绝对路径：以 "/" 开头，例如 "/path/to/module.js"
- 相对路径：以 "./" 或 "../" 开头，例如 "./module.js" 或 "../path/to/module.js"
在使用 import 语句引用本地文件时，我们必须遵守这些规则。如果我们使用了不正确的路径格式，就会出现上述错误。
下面是一些示例代码，演示如何使用 import 引用本地文件：
// 引用同级目录下的 module.js 文件
import { foo } from './module.js';
// 引用上级目录下的 module.js 文件
import { bar } from '../module.js';
// 引用根目录下的 module.js 文件
import { baz } from '/path/to/module.js';在这些示例代码中，我们使用了不同的路径格式来引用本地文件。这些路径格式都符合 import 引用本地文件的规则，因此不会出现错误。
总结
在前端开发中，使用 import 引用本地文件是非常常见的操作。然而，有时候我们会遇到 import 引用不到本地文件的问题。为了解决这个问题，我们必须遵守 import 引用本地文件的规则，即使用绝对路径或相对路径来引用本地文件。在实际开发中，我们应该注意这些规则，并确保我们的代码符合这些规则，以避免出现错误。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6577b42cd2f5e1655d15c2a2