如何从另一HTML文件导入变量？import/export报错求解

错误原因 #

你直接尝试导入HTML文件作为ES模块，服务器对HTML文件返回的MIME类型是text/html，不符合ES模块要求的application/javascript，因此触发MIME类型检查错误。同时，HTML页面内的<script type="module">导出的内容无法被其他HTML直接导入，因为HTML本身不是标准的JS模块文件。

正确实现步骤 #

将共享变量提取到独立的JS模块文件中，再在两个HTML页面里导入该模块：

1. 创建共享JS模块
   新建shared.js文件，定义并导出需要共享的变量：

   // shared.js
   export const num = 1;
   

2. 修改test_1.html导入模块

   <!DOCTYPE html>
   <html lang="ko">
   <head>
       <meta charset="utf-8" />
       <title>DB Test</title>
   </head>
   <body>
       <script type="module">
           import { num } from './shared.js';
           console.log(num); // 输出1
       </script>
   </body>
   </html>
   

3. 修改test_2.html导入模块

   <!DOCTYPE html>
   <html lang="ko">
   <head>
       <meta charset="utf-8" />
       <title>DB Test</title>
   </head>
   <body>
       <script type="module">
           import { num } from './shared.js';
           console.log(num); // 输出1
       </script>
   </body>
   </html>
   

注意事项 #

• 必须在本地服务器环境运行（比如VSCode Live Server、http-server工具），直接用file://协议打开HTML会触发CORS限制，导致模块加载失败。
• 确保shared.js与两个HTML文件在同一目录下，导入路径要准确。
• 优先使用const/let声明变量，替代旧的var，符合现代JavaScript规范。

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