mirage2d 提供了多种获取 SDK 类库的方式，你可以根据项目的实际情况和技术栈选择以下任意一种方式安装。

• 从 npm 安装
• 从 CDN 引入
• 从 mirage2d 官网 下载 接下来我们将分别介绍这些安装方式，以及下载后的目录结构。

1.从 npm 获取

使用 Node 环境下的现代 web 前端技术栈时，可以使用 npm 或 cnpm 或 yarn 等方式来安装 mirage2d 包

//安装mirage2d主库
npm install mirage2d --save-dev

//安装mirage2d插件（按需安装）
npm install mirage2d-mapv --save-dev

安装后在相关使用文件中引入使用即可

import "mirage2d/dist/style.css";
import * as mirage2d from "mirage2d";

//导入mirage2d插件（按需使用，需要先npm install）
import "mirage2d-mapv";

详见在项目中引入在项目中引入 mirage2d

2. 从 CDN 获取

在 html 的 head 标签中引入 mirage2d 包相关 CDN 资源.

unpkg.com的 CDN 服务

 

<!--引入mirage2d库lib-->
<link href="https://unpkg.com/mirage2d/dist/css/style.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/mirage2d/dist/mirage2d.umd.js" type="text/javascript" ></script>


<!--引入mirage2d库插件lib（按需引入）-->
<script src="https://unpkg.com/mirage2d-mapv/dist/mirage2d-mapv.js" type="text/javascript" ></script>

jsDelivr的 CDN 服务

 

<!--引入mirage2d库lib-->
<link href="https://cdn.jsdelivr.net/npm/mirage2d/dist/css/style.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/mirage2d/dist/mirage2d.umd.js" type="text/javascript"></script>

<!--引入mirage2d库插件lib（按需引入）-->
<!-- <script src="https://cdn.jsdelivr.net/npm/mirage2d-mapv/dist/mirage2d-mapv.umd.js" type="text/javascript" ></script>  -->

2.3 可以选用mirage2d官网的CDN服务

 

<!--引入mirage2d库lib-->
<link href="http://www.miragemap.cn/mirage/map2d/lib/css/style.css" rel="stylesheet" type="text/css" />
<script src="http://www.miragemap.cn/mirage/map2d/lib/mirage2d.umd.js" type="text/javascript" ></script>

<!--引入mirage2d库插件lib（按需引入）-->
<script src="http://www.miragemap.cn/mirage/map2d/lib/plugins/mirage2d-mapv.umd.js" type="text/javascript" ></script>

引入后在相关使用文件中直接使用window.mirage2d

3. 从 mirage2d 官网 下载获取

可以在mirage2d 官网下载 “mirage2d-sdk.rar”离线包 后在本地项目中引入相对路径资源来使用。

将下载的 SDK 放在项目目录内，使用方式与上面 2 种基本相同，区别在于 url 路径是本地项目的相对路径。

如果您有购买 mirage2d 源码版，在收到 mirage2d-sdk源码版.rar 交付文件后，是相同的使用方式。

3.1 类似 CDN 的 head 静态资源方式引入

 

<!--引入mirage2d库lib-->
<link href="./lib/mirage2d/dist/css/style.css" rel="stylesheet" type="text/css" />
<script src="./lib/mirage2d/dist/mirage2d.js" type="text/javascript" ></script>

<!--引入mirage2d库插件lib（按需引入）-->
<script src="./lib/mirage2d/plugins/mirage2d-mapv.umd.js" type="text/javascript" ></script>

3.2 类似 npm 的 import 方式导入

方式 1：需改动源码
将离线包放在任意目录下，按相对路径修改 mirage2d 的引入处，如下：

import "./lib/mirage2d/css/style.css";
//注意es6 模式使用的是cjs
import * as mirage2d from "./lib/mirage2d/mirage2d.cjs.js";

方式 2：无需改动源码，修改配置(建议)

• 配置后，无需改动源码，在项目代码中使用时与使用 npm 包是一样的方式，如 import * as mirage2d from "mirage2d";

• 将 npm 安装后的 node_modules/mirage2d/下的所有文件拷贝一份放在packages/mirage2d/目录。

• 将mirage2d-sdk.rar离线包内文件 覆盖至packages/mirage2d/dist/目录下。

• 修改package.json中 mirage2d 包配置为："mirage2d": "file:packages/mirage2d",

• vite 时需要排除

build: {
  commonjsOptions: {
    //默认内部只处理了node_modules，需要将"packages/"也标识处理
    include: /node_modules|packages/
  },
  //已忽略其他配置
}

• 如果引入本地版本build编译很慢时，可以按下面配置修改babel.config.js

module.exports = {
  //已忽略其他配置
  ignore: [
    "packages/mirage2d/dist/mirage2d.js", //改成自己的本地地址
  ],
};