Setting Node_Env to Production causes page to become unresponsive #13
Description
Hi r3code team. I am fairly new to VUE and JS in general, and it is very possible that this issue is something that I have done wrong, but it seems to have something to do with having vue-vis-network component and setting the node_env environment variable to production. That being said, when I run my app with node_env set to development, everything seems to work perfectly fine. I would greatly appreciate if someone could give me a hand with this issue.
Also, I am currently using Webpack and vue-cli-service build to minify the app and serve it in production
This is how my app is set up:
//main.js
import { Network } from 'vue-vis-network';
import App from '@/App.vue';
import router from '@/router';
import store from '@/store';
Vue.component('network', Network);
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
//MulticastFlows.vue
<template>
<div>
<v-container fluid grid-list-xs>
<v-layout row class="multicastFlowsLayout">
<v-flex d-flex xs8 class="mr-1">
<MulticastFlowGraph
:loadingElements="loadingElements"
:nodes="nodes"
:edges="edges"
:options="options"
/>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
export default {
name: 'MulticastFlows',
components: {
MulticastFlowGraph,
},
data() {
return {
loadingElements: false,
nodes: [
{
id: '1',
label: '1',
},
{
id: '2',
label: '2',
},
],
edges: [{ from: '1', to: '2', label: '1122' }],
options: {
layout: {
hierarchical: {
nodeSpacing: 200,
levelSeparation: 100,
edgeMinimization: false,
blockShifting: false,
direction: 'UD',
sortMethod: 'directed',
},
},
edges: {
shadow: { enabled: true },
arrows: 'to',
arrowStrikethrough: false,
smooth: {
type: 'continuous',
},
},
nodes: {
physics: false,
shape: 'box',
shadow: { enabled: true },
},
physics: {
enabled: false,
},
},
};
},
};
</script>
<style scoped>
.multicastFlowsLayout {
position: absolute;
width: 98%;
height: 95%;
}
</style>
//MulticastFlowGraph.vue
<template>
<v-card class="pa-2 mx-2 networkCard elevation-5">
<network class="network"
ref="network"
:nodes="nodes"
:edges="edges"
:options="options"/>
</v-card>
</template>
<script>
export default {
name: 'MulticastFlowGraph',
props: [
'nodes',
'edges',
'options',
],
data() {
return {
};
},
};
</script>
<style scoped>
.network {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
</style>