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

Question

I have a Vue 2 sample project at https://github.com/ericg-vue-questions/leaflet-test

This is a simple import issue for my code that I am not sure how to handle.

A couple of things I have tried are to modify the code to do:

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

but this results in a build error:

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

To the index.html , I also tried adding:

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

but that results in the runtime error:

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

What needs to be changed so I can import and use this leaflet extension with a vue app?

Answer 1

A solution I found was to modify main.js so it looks like:

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')

Adding the require resolved the problem.

I would be interested in alternative solutions, if there are any.