要在Vue页面上展示MXD地图文件，可以使用一些开源的JavaScript库来实现。以下是一种可能的方法：

1. 安装ArcGIS API for JavaScript：在Vue项目中使用ArcGIS API for JavaScript可以轻松地加载和展示地图。在命令行中运行以下命令来安装该库：

```
npm install @arcgis/core
```

2. 创建地图组件：在Vue项目中创建一个地图组件，例如`Map.vue`。

3. 导入ArcGIS API模块：在`Map.vue`组件中导入需要的ArcGIS API模块，例如地图、视图和MXD解析器：

```javascript
import { Map, MapView } from '@arcgis/core';
import { read } from '@arcgis/core/portal/support/mixins/PortalItemMixin';
```

4. 加载MXD地图文件：在`Map.vue`组件的`created`或`mounted`生命周期钩子中，使用MXD解析器加载地图文件。可以使用`read`方法从MXD文件中读取地图对象：

```javascript
created() {
  const mxdUrl = 'path/to/your/mxd/file.mxd';
  read({ url: mxdUrl }).then((map) => {
    this.map = map;
    this.createMapView();
  });
}
```

5. 创建地图视图：在`Map.vue`组件中创建地图视图。在`createMapView`方法中，将地图对象和视图容器DOM元素传递给`MapView`构造函数：

```javascript
methods: {
  createMapView() {
    const viewContainer = this.$refs.mapView;
    this.view = new MapView({
      container: viewContainer,
      map: this.map
    });
  }
}
```

6. 在模板中展示地图：在`Map.vue`组件的模板中，将地图视图容器放在需要展示地图的位置：

```html
<template>
  <div>
    <div ref="mapView" style="height: 100vh;"></div>
  </div>
</template>
```

7. 在Vue页面中使用地图组件：在需要展示地图的Vue页面中，导入并使用`Map`组件：

```javascript
<template>
  <div>
    <Map />
  </div>
</template>

<script>
import Map from '@/components/Map.vue';

export default {
  components: {
    Map
  },
  // ...
};
</script>
```

现在，当Vue页面加载时，它将使用ArcGIS API for JavaScript加载并展示MXD地图文件。确保将路径`path/to/your/mxd/file.mxd`替换为实际的MXD地图文件路径。