> **本文回答**：`vjmap is not defined` 或 `vjmapext is not defined` —— 脚本加载顺序错。

## 一、症状

Console 报错：

```
Uncaught ReferenceError: vjmap is not defined
Uncaught ReferenceError: vjmapext is not defined
```

或：

```
Uncaught TypeError: Cannot read properties of undefined (reading 'MapCadLayer')
```

## 二、根因：依赖顺序

`vjmapext` **依赖** `vjmap`。加载顺序必须是：

```html
<!-- 1. vjmap 样式 -->
<link rel="stylesheet" href="https://vjmap.com/demo/js/vjmap/vjmap.min.css" />

<!-- 2. vjmap 库（先） -->
<script src="https://vjmap.com/demo/js/vjmap/vjmap.min.js"></script>

<!-- 3. vjmapext 库（后） -->
<script src="https://vjmap.com/demo/js/vjmap/vjmapext.min.js"></script>

<!-- 4. 业务代码 -->
<script src="./app.js"></script>
```

## 三、常见错法

### 1 顺序反了

```html
<script src="vjmapext.min.js"></script>   <!-- 加载时 vjmap 还不存在 -->
<script src="vjmap.min.js"></script>
```

### 2 用了 defer 但顺序错

```html
<script defer src="vjmap.min.js"></script>
<script defer src="vjmapext.min.js"></script>
```

defer 按照 HTML 里出现顺序执行，这样**是对的**。但如果写成：

```html
<script defer src="vjmapext.min.js"></script>
<script defer src="vjmap.min.js"></script>
```

仍然错。

### 3 模块 import 忘记依赖

```js
// ❌ 错：没先 import vjmap
import * as vjmapext from 'vjmapext';
```

```js
// ✅ 对
import * as vjmap from 'vjmap';
import * as vjmapext from 'vjmapext';
```

## 四、npm 项目

```bash
npm i vjmap vjmapext
```

```js
import * as vjmap from 'vjmap';
import * as vjmapext from 'vjmapext';
// 顺序无所谓：vjmapext 内部 require('vjmap') 会自动拿到
```

注意：打包时 Vite / webpack 可能把两者合成一个 chunk；不影响。

## 五、CDN 版本不兼容

```html
<!-- 示意：混用两个不同版本目录的构建（实际 CDN 均为 /demo/js/vjmap/ 下的文件） -->
<script src="https://vjmap.com/demo/js/vjmap/old/vjmap.min.js"></script>
<script src="https://vjmap.com/demo/js/vjmap/vjmapext.min.js"></script>
```

可能运行但报古怪错。**统一版本**。

## 六、网络问题：资源加载失败

Console 里有：

```
GET https://vjmap.com/demo/js/vjmap/vjmap.min.js net::ERR_TIMED_OUT
```

或 404。检查：

- URL 是否正确
- 防火墙 / 代理
- CDN 域名是否可访问（公司内网封外网）

## 七、script 标签放错位置

```html
<head>
  <script src="./app.js"></script>      <!-- ❌ 早于 vjmap 加载 -->
  <script src="vjmap.min.js"></script>
</head>
```

**修法**：把业务脚本放到 body 底部，或用 `defer` + 顺序正确，或监听 `DOMContentLoaded`：

```js
document.addEventListener('DOMContentLoaded', () => {
  // vjmap 此时已加载
  const map = new vjmap.Map(...);
});
```

## 八、检查脚本已加载

```js
if (typeof vjmap === 'undefined') {
  throw new Error('vjmap 未加载，检查 <script src="vjmap.min.js"> 是否在本脚本之前');
}
if (typeof vjmapext === 'undefined') {
  throw new Error('vjmapext 未加载或加载顺序错');
}
```

## 九、SSR / Nuxt

SSR 环境没有 window，直接 import 会爆：

```js
// 错：Nuxt SSR 阶段 window undefined
import * as vjmap from 'vjmap';
```

修：客户端懒加载：

```js
if (process.client) {
  const vjmap = await import('vjmap');
  const vjmapext = await import('vjmapext');
  // init map
}
```

## 十、常见坑

1. **IE 兼容**：vjmap 不支持 IE；必须现代浏览器。
2. **自签证书**：HTTPS 页面加载 HTTP 脚本 → mixed content 被浏览器拦截；vjmap 和业务都用 https。
3. **本地 file://**：浏览器对 file:// 有很多限制；一定用 `http-server` 或 Vite 跑。
4. **Vue 2 里 import 没效果**：Vue 2 + babel 老配置 → ES 模块被 require 当 CommonJS；改用 `require('vjmap')` 或升级构建。
5. **CDN 返回 HTML 404 页面**：URL 错误时 CDN 返回 HTML 但状态码 200 → `<script>` 执行 HTML 报语法错；检查 Network 面板响应体。

## 相关

- 安装 → [setup/install](../setup/install.md)
- 容器配置 → [setup/container](../setup/container.md)
- Vue/React → [setup/integrations](../setup/integrations.md)
