Chrome中ES6 Import无法使用问题求助（原生JS单页应用）

嘿，我来帮你搞定这个问题！Chrome 65确实已经支持原生ES6模块了，但你的配置里有几个关键细节没做好，导致浏览器报错。下面一步步给你修正：

1. 给script标签添加type="module"属性 #

浏览器默认会把<script>标签里的内容当作普通脚本处理，根本识别不了import/export语法。你必须明确告诉浏览器这是一个模块脚本：

<!-- 不要直接引入file-1.js，因为file-2.js会通过import自动加载它 -->
<script type="module" src="file-2.js"></script>

这里不用手动在html里引入file-1.js，因为ES模块的import语句会自动触发浏览器去请求依赖的文件，帮你处理加载顺序。

2. 必须在HTTP服务器环境下运行，不能直接打开本地文件 #

Chrome对file://协议下的ES模块有跨域限制，直接双击index.html打开的话，浏览器会因为安全策略阻止模块加载。你需要启动一个本地HTTP服务器来运行代码：

• 如果你有Python 3，直接在项目目录下运行：

  python -m http.server 8000
  

• 或者用Node.js的http-server（先通过npm install -g http-server全局安装）：

  http-server
  

然后在浏览器里访问http://localhost:8000/index.html就可以正常运行了。

3. 确保import路径正确 #

检查file-2.js里的import路径，确保和文件实际位置匹配。同一目录下的话，写成./file-1.js（加上.js后缀更稳妥，早期部分浏览器对省略后缀的支持有问题）：

import { func1, func2 } from './file-1.js';

完整可运行示例 #

file-1.js #

export function func1() {
  console.log("func1 执行了！");
}

export function func2() {
  console.log("func2 执行了！");
}

file-2.js #

import { func1, func2 } from './file-1.js';

// 测试调用
func1();
func2();

index.html #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>ES模块测试</title>
</head>
<body>
  <script type="module" src="file-2.js"></script>
</body>
</html>

按照上面的步骤调整后，Chrome 65就能正常加载并执行你的ES模块代码啦！

内容的提问来源于stack exchange，提问作者darKnight