VS2019 ASP.NET项目引入Axios遇exports未定义错误求助

问题原因 #

你遇到的报错本质是：VS2019默认把TypeScript编译成CommonJS模块（这是Node.js环境专用的模块规范），但浏览器里根本没有exports、require这些CommonJS的全局对象，所以运行时直接抛出引用错误。

基础解决方案（无需复杂工具） #

如果你只是想快速解决问题，不想折腾模块打包工具，推荐下面两种简单方法：

方法1：改用全局引入Axios

这是最直接的方案，完全避开模块系统的问题：

1. 在你的HTML页面（比如布局页或当前功能页）里，添加script标签引入Axios：

   <!-- 可选：用CDN引入 -->
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <!-- 或者用本地node_modules里的文件，路径根据项目结构调整 -->
   <!-- <script src="~/node_modules/axios/dist/axios.min.js"></script> -->
   

2. 修改你的TypeScript文件，把import axios from 'axios';替换成全局声明：

   declare var Vue;
   declare var axios: any; // 声明全局axios变量，让TypeScript识别它
   interface Product {
       Id: number;
       Code: string;
       Description: string;
       Ean: string;
   }
   // 后面的Vue实例、方法等代码保持不变...
   

3. 重新编译TypeScript，生成的JS文件就不会再出现exports相关代码，浏览器运行时也不会报错了。

方法2：调整TypeScript编译为AMD模块

如果你想保留import语法，可以把TypeScript编译成浏览器兼容的AMD模块（需要配合RequireJS加载）：

1. 在项目根目录新建tsconfig.json文件，添加以下配置：

   {
       "compilerOptions": {
           "module": "amd", // 把模块系统切换为AMD（浏览器兼容）
           "target": "es5", // 目标兼容ES5，适配大多数浏览器
           "strict": false, // 不需要严格模式可设为false
           "outDir": "./Scripts" // 编译后的JS输出目录
       },
       "include": ["./Scripts/**/*.ts"] // 指定要编译的TS文件路径
   }
   

2. 在HTML页面里引入RequireJS，然后加载编译后的JS文件：

   <script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.js"></script>
   <script>
       require(['./Scripts/EditProduct'], function() {
           // 模块加载完成后执行的逻辑（按需添加）
       });
   </script>
   

3. 重新编译TypeScript，现在生成的JS会采用AMD规范，RequireJS会帮你处理模块加载，不会再出现exports错误。

补充说明 #

如果之后你需要更复杂的前端构建流程（比如多模块打包、代码压缩），可以考虑Webpack、Parcel这类工具，但对于当前的基础需求，上面两种方法足够解决问题。

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