javascript - 将外部脚本添加到 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 中安装它，只要你把 <script> script 之上的 jQuery 标签放置在生成的 html 文件中的构建文件的标记，您可以访问 $应用程序中的 jQuery 变量。

您可以做一些事情，比如创建一个单独的 .js您要访问的变量的文件。 let pbx = new Pbx(data)和 pbx只要正确放置脚本标签，就可以在整个应用程序中访问数据。

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