JS文件import/export导入导出不生效无控制台输出怎么办

你的代码语法本身没有错误，出现无控制台输出、脚本完全不执行的核心原因是：你直接通过file://协议双击打开了本地HTML文件，ES模块受浏览器安全策略限制，只能在HTTP/HTTPS服务环境下运行，本地文件协议下模块加载会被浏览器静默拦截，不会执行脚本，很多场景下也不会抛出显式报错。

解决方法 #

不要直接双击打开本地HTML文件，在项目目录启动一个本地静态文件服务，通过服务给出的http://localhost:xxx地址访问页面即可，常见的本地服务启动方式：

• 如果你使用VSCode编辑器，直接安装Live Server插件，右键HTML文件选择「Open with Live Server」即可自动启动服务打开页面
• 如果你本地安装了Node.js，在项目文件夹终端执行npx serve，按照终端输出的本地地址访问即可
• 如果你本地安装了Python3，在项目文件夹终端执行python -m http.server，访问http://localhost:8000即可

代码正确性核对 #

你贴出的三份代码本身语法完全符合ES模块规范，没有写法错误：

1. HTML文件：正确给script标签添加了type="module"声明

<body>
    <button id="changecolor"></button>
    <script type="module" src="./JSWebTesting.js"></script>
</body>

2. JSWebTesting.js：相对路径导入、事件绑定写法均正确

"use strict";

import { toColor } from './JSWebTesting2.js';

document.getElementById('changecolor').addEventListener('click', () => {
    toColor('green');
})

3. JSWebTesting2.js：命名导出、函数逻辑均正确

"use strict";

function toColor(color) {
    document.body.style.backgroundColor = color;
}

export { toColor }

验证方式 #

你可以打开浏览器开发者工具的「网络」面板，刷新页面后查看两个JS文件的请求状态：如果是file协议打开，两个JS文件要么请求被拦截，要么压根不会发起请求；切换到HTTP服务访问后，就能看到两个JS文件请求成功，console.log和按钮点击逻辑都会正常生效。

补充说明：ES模块默认自动开启严格模式，代码中手动写的"use strict"声明可以省略，不影响运行。

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