#javascript #html #export #nuxt.js #token
Вопрос:
У меня возникла проблема, когда я хочу импортировать переменную из отдельного файла js в свой html-код в статической папке (nuxt.js). Итак, в pages/index.vue у меня есть код для вызова статической папки/coba, например:
<template>
<div class="container">
<div>
<!-- Leaflet map -->
<div ref="map" id="map" class="map h-screen w-screen z-0"></div>
<div v-if="map">
<!-- Take list of plugins in static folder -->
<div v-for="(data, i) in listPlugins" :key="i">
<component :is="data.name" />
</div>
</div>
</div>
</div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
export default {
data: function () {
return {
// Customize map in leaflet
input: "ea",
url: null,
map: null,
opt: {
zoomControl: false,
minZoom: 2,
zoom: 2,
center: [0, 115],
zoomSnap: 0.1,
scrollWheelZoom: false,
smoothWheelZoom: true,
smoothSensitivity: 1.9,
preferCanvas: true,
},
// list plugins in static folder
listPlugins: [
{
name: "signature",
path: "/coba/"
}
],
};
},
mounted() {
// import from server side, vue and axios
this.listPlugins.forEach((el) => {
// import component
Vue.component(el.name, function (resolve, reject) {
// import html
axios.get(el.path).then((response) => {
// return template
resolve({
template: response.data,
});
});
});
});
// import in client side
this.map = L.map(this.$refs.map, this.opt);
window.globalMap = this.map;
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(
this.map
);
},
computed: {
compiledHtml: function () {
return this.input;
},
},
};
</script>
Из этого кода я успешно импортирую static/coba/index.html (плагины в статической папке). Вот это static/coba/index.html код:
<div class="bg-white" id="indexing">
<script type="application/javascript" src="/coba/main.js">
</script>
<script type="application/javascript">console.log(kosJson)</script>
</div>
Поэтому я хочу импортировать переменную ‘kosJson’ из static/coba/main.js файл в static/coba/index.html файл. Вот это static/coba/main.js код:
var kosJson = {
type: "FeatureCollection",
bbox: [110.340501, -7.791898, 110.397112, -7.725499],
features: [
{
type: "Feature",
properties: {
group_index: 0,
value: 150,
center: [110.37306445531925, -7.763547310456208],
name: "inner",
},
geometry: {
coordinates: [
[
[110.358458, -7.761048],
[110.359775, -7.766934],
[110.361067, -7.768489],
[110.366009, -7.777826],
[110.367841, -7.778932],
[110.367974, -7.778939],
[110.376953, -7.774523],
[110.383649, -7.769544],
[110.387071, -7.767945],
[110.387082, -7.767919],
[110.383509, -7.758643],
[110.382457, -7.756286],
[110.373039, -7.749695],
[110.372394, -7.748937],
[110.372202, -7.748859],
[110.368253, -7.748905],
[110.360261, -7.755119],
[110.358998, -7.759105],
[110.358458, -7.761048],
],
],
type: "Polygon",
},
},
{
type: "Feature",
properties: {
group_index: 0,
value: 300,
center: [110.37306445531925, -7.763547310456208],
name: "outer",
},
geometry: {
coordinates: [
[
[110.340501, -7.746678],
[110.341258, -7.748806],
[110.341277, -7.748819],
[110.343561, -7.748573],
[110.348078, -7.749304],
[110.353, -7.756003],
[110.353117, -7.758348],
[110.354103, -7.764105],
[110.353904, -7.767563],
[110.354281, -7.76994],
[110.357199, -7.777858],
[110.356138, -7.782538],
[110.356133, -7.782576],
[110.356158, -7.782917],
[110.358465, -7.789169],
[110.358507, -7.789195],
[110.367208, -7.791898],
[110.3694, -7.791342],
[110.370042, -7.791178],
[110.376603, -7.788949],
[110.376837, -7.78849],
[110.377084, -7.787395],
[110.384376, -7.779797],
[110.386823, -7.779643],
[110.38716, -7.779556],
[110.390712, -7.776963],
[110.39405, -7.770693],
[110.396416, -7.764533],
[110.396462, -7.7643],
[110.396851, -7.761966],
[110.396888, -7.761722],
[110.397112, -7.759593],
[110.396004, -7.757578],
[110.395933, -7.757549],
[110.391175, -7.753969],
[110.391352, -7.74469],
[110.391456, -7.74451],
[110.390382, -7.742087],
[110.390333, -7.74207],
[110.382548, -7.734621],
[110.382079, -7.727715],
[110.381049, -7.725737],
[110.380802, -7.725521],
[110.380721, -7.725499],
[110.378725, -7.726407],
[110.378649, -7.726603],
[110.376259, -7.730874],
[110.364958, -7.727939],
[110.36474, -7.72723],
[110.364669, -7.727001],
[110.362468, -7.726045],
[110.362352, -7.726083],
[110.361228, -7.728059],
[110.355288, -7.737032],
[110.349829, -7.740159],
[110.344099, -7.742356],
[110.342559, -7.743532],
[110.342056, -7.744127],
[110.340501, -7.746678],
],
],
type: "Polygon",
},
},
],
metadata: {
attribution: "openrouteservice.org | OpenStreetMap contributors",
service: "isochrones",
timestamp: 1623658989426,
query: {
locations: [[110.37313501406109, -7.763440484516543]],
range: [300, 150],
},
engine: {
version: "6.5.0",
build_date: "2021-05-17T12:08:50Z",
graph_date: "2021-05-31T22:36:37Z",
},
},
};
export default kosJson;
But my problem is ‘kosJson’ variable still not imported in static/coba/index.html file. The error in console is like this:
- ReferenceError: kosJson is not defined
- You are running Vue in development mode.
Make sure to turn on production mode when deploying for production. - SyntaxError: Unexpected token ‘export’