将外部脚本添加到 vue.js

Question

我想在我的 vue.js 应用程序中包含一个简单的 javascript 脚本，其中包含一个指向库的外部链接，这个：

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

我有这个 main.js 文件，我想将我的脚本保留在外部：

    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),
    });

我想知道如何以一种好的方式包含我的库，我试图在这里包含我的 javascrupt 但我不太喜欢它。

谢谢

Answer 1

我记得我使用过 jQuery 而没有在 npm 中安装它，只要您将 jQuery 的<script>标签放在生成的 html 文件中的构建文件的script标签之上，您就可以访问 jQuery 的$变量在您的应用程序中。

您可以执行一些操作，例如为要访问的变量创建单独的.js文件。 let pbx = new Pbx(data)并且pbx数据可以在整个应用程序中访问，只要脚本标签的放置是正确的。

不过有一件事， document.addEventListener('DOMContentLoaded')可能会干扰 vue，但是如果你想立即访问它，你可以访问pbx变量到App组件的mounted生命周期