唯杰地图 logo唯杰地图
VJMAP
EN

cdn-order

vjmap/references/trouble/cdn-order.md 4.2 KB173 行
原文

本文回答：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。加载顺序必须是：

<!-- 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 顺序反了

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

2 用了 defer 但顺序错

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

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

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

仍然错。

3 模块 import 忘记依赖

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

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

四、npm 项目

npm i vjmap vjmapext

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

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

五、CDN 版本不兼容

<!-- 示意：混用两个不同版本目录的构建（实际 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 标签放错位置

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

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

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

八、检查脚本已加载

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 会爆：

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

修：客户端懒加载：

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 面板响应体。

相关