3

由于服务端渲染，vuepress不能使用vue依赖 DOM 导入库的组件。

即这不起作用，因为mapbox-gl需要在导入时访问 DOM：

import mapboxgl from 'mapbox-gl'

建议的解决方案是在created()钩子中使用动态导入，例如

created () {
  import('mapbox-gl').then(MapboxModule => {
    window.mapboxgl = MapboxModule.default
  }
}

但是，我无法使动态导入与模块捆绑一起正常工作。[编辑]（错误启动后，动态导入方法确实有效。）

另一种策略可能是使用head 部分加载mapbox-gl脚本。vuepress config.js例如，在我的docs/.vuepress/config.js文件中，我有：

head: [
    ['link', {
      rel: 'stylesheet',
      type: 'text/css',
      href: 'https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css'
    }],
    ['script', {
      src: 'https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'
    }]
  ],

除了import语句之外，整个组件都可以正常使用，因为mapboxgl变量在window命名空间中可用。

因此我的问题是：是否有一种简单而优雅的方式来停用import专门用于 from 的语句vuepress？

我当前的解决方案包括创建一个没有导入的基本组件（用于 from vuepress），然后在另一个组件中扩展它，然后显式导入并注册全局变量，例如

<script>
import mapboxgl from 'mapbox-gl'
window.mapboxgl = mapboxgl
// eslint-disable-next-line
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'
window.MapboxGeocoder = MapboxGeocoder
// eslint-disable-next-line
import MyComponentBase from './MyComponentBase.vue'

export default {
  name: 'MyComponent',
  extends: MyComponentBase
}
</script>
4

0 回答 0