HTML项目中如何将JS文件导入另一个JS文件，解决非模块无法使用import报错

出现该报错有两个核心原因：

1. 浏览器默认将JS文件作为普通脚本加载，原生不支持ES模块的import/export语法
2. 导出导入语法不匹配：config.js使用的是命名导出，而main.js用的是默认导入语法

• 第一步：修改HTML文件中引入main.js的script标签，添加type="module"属性，声明该脚本为ES模块：

<script type="module" src="main.js"></script>

添加该属性后，浏览器才会允许脚本内使用模块化语法，同时文件路径需要携带完整的.js后缀（和你当前的写法一致，无需额外修改）。

• 第二步：修正导入/导出语法，二选一即可：
  方案1：保留config.js的命名导出写法，修改main.js的导入语句，用花括号包裹命名导出的变量名：

  import { config } from './config.js';
  

  方案2：保留main.js的默认导入写法，修改config.js的导出为默认导出：

  export default {
      identityBaseURL : 'https://url1.azurewebsites.net/',
      tenantId : '1234',
  }
  

如果是本地直接用file协议打开HTML文件，浏览器会因为跨域安全规则拦截模块加载，需要用本地静态服务器运行项目，常见的实现方式包括VS Code的Live Server插件、Python内置的http.server、Node生态的serve工具等。

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