如何将传单折线装饰器与 vue 应用程序一起使用

Question

我在https://github.com/ericg-vue-questions/leaflet-test有一个 Vue 2 示例项目

这是我的代码的一个简单导入问题，我不确定如何处理。

我尝试过的几件事是修改代码：

<script>
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import * from 'leaflet-polylinedecorator';

但这会导致构建错误：

  10:9  error  Parsing error: Unexpected token, expected "as"
> 4 | import * from 'leaflet-polylinedecorator';

对于index.html ，我还尝试添加：

<script src="../node_modules/leaflet-polylinedecorator/dist/leaflet.polylineDecorator.js"></script>

但这会导致运行时错误：

Uncaught SyntaxError: Unexpected token '<' (at leaflet.polylineDecorator.js:1:1)

需要更改什么，以便我可以导入此 leaflet 扩展并将其与 vue 应用程序一起使用？

Answer 1

我发现的一个解决方案是修改main.js ，使它看起来像：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

require( "../node_modules/leaflet-polylinedecorator/dist/leaflet.polylineDecorator.js" );

new Vue({
  render: h => h(App),
}).$mount('#app')

添加require解决了这个问题。

如果有的话，我会对替代解决方案感兴趣。