将外部脚本添加到 vue.js

Question

I would like to include into my vue.js application a simple javascript script with an external link to the library, this one:

<script type="text/javascript" src="https://my_site/index.js"></script>
 <link rel="stylesheet" href="https://my_site/index.css" />

 <script type="text/javascript">
     document.addEventListener('DOMContentLoaded', function () {
         new Pbx(
             {
                 "key1": 'value1',
                 "key2": 'value2'
             },
             {
                 'config': 'configValue'
             }
         );
     });
 </script>

I have this main.js file and I would like to keep external my script:

    import Vue from 'vue';
    import VModal from 'vue-js-modal';
    import App from './App.vue';
    import router from './router';
    import store from './store';
    import i18n from './i18n';
    import VueScrollactive from 'vue-scrollactive';
    import VTooltip from 'v-tooltip';

    import './styles/index.scss';

    export default new Vue({
      el: '#myApp',
      store,
      router,
      i18n,
      render: h => h(App),
    });

I would like to know how to include my library in a good way, I have tried to include my javascrupt here but I don't like it so much.

Thanks

Answer 1

I remember I had used jQuery without installing it in npm, as long as you place <script> tag of jQuery on top of script tag of the build files that is placed inside the generated html file you may able to access the $ variable of jQuery inside your app.

You may do something like creating a separate .js file for that variable you want to access. let pbx = new Pbx(data) and the pbx data is accessible throughout the app as long the placing of script tags is proper.

One thing though, document.addEventListener('DOMContentLoaded') might interfere with vue, however you can access the pbx variable to the mounted life cycle of App component if you want to access it immediately