报错改起来还是比较简单，主要排查起来值得记录，省流直接看最下面解决办法

报错背景

vue2页面升级vue3，直接按照原来的引入，结果报错

<script setup lang="ts">
import * as echarts from "echarts";
import "@/assets/china.js";

image.png

ReferenceError: echarts is not defined

排查

看信息是没找到echarts 实例，在入口页面import * as echarts from "echarts";后面
紧接着打印echarts 看看有没有

import * as echarts from "echarts";
console.log('vue3 entrance page')
console.log(echarts)
import "@/assets/china.js";

结果还是没有，说明问题出在china.js文件，进去看看

image.png

这种function左边带括号的是JS立即执行函数的写法，就是如果引入这个js文件，会声明
并执行该函数，加几个打印点看看流程

image.png

下面是执行结果

image.png

说明逻辑走到 console.log(44) 这里报错，但是还是没有头绪
这时候把vue2的旧项目启动起来，对应的china.js也加打印标记点。

image.png

然后是执行结果

image.png

对比我们可以发现 vue2里是走到了 console.log(12)标记点，这个标记点下面有一行注释
// AMD. Register as an anonymous module.
说明符合AMD的规范才进入到这块逻辑。
问题就定位了 vite+vue3 的china.js 判断 if (typeof define === 'function' && define.amd)为false
和vue2的不一样，没有进入预期的逻辑。
这就很奇怪了，vue3写的也是js啊，amd规范应该没问题呀，
那问题可能就出在vite上了
果然搜索发现vite不支持require引入。

解决

问题是vite不支持requre引入文件，那咱们就改成按照vite标准的。

解决办法一：修改china.js

image.png

研读红框里的代码，发现主要逻辑是判断运行环境再判断有没有echarts实例，最后核心代码是黄色箭头指的运行echarts.registerMap，那我们直接写个js文件运行他不就行了
在china.js同级目录新建文件vue3_china.js vue3_china.js

image.png
运行下，没有问题！

解决办法二：改成china.json

按照echarts官方文档地图示例

image.png

我们在setOption函数执行前，使用registerMap注册好地图就行。
所以把china.js里面registerMap后面的json数据单独粘出来新建一个文件china.json放进去。
china.json
我们在vue2 都是require json文件，在vite就不能了，得按照vite标准将json引入为URL才行

image.png

运行下，没有问题!