VueJS 2：如何按顺序加载静态 JS？

Posted 2023-02-22

【中文标题】VueJS 2：如何按顺序加载静态 JS？

【英文标题】：VueJS 2: How to load static JS in order?

【发布时间】：2018-12-31 21:03:13

【问题描述】：

我有使用 jQuery 和缩小的自定义 JS 插件的 html 主题。应用程序需要先加载 jQuery 而不是缩小的自定义 JS 插件。而且我也无法编辑缩小的自定义 JS 插件。

mounted() 
  let jqueryJS = document.createElement('script');
  jqueryJS.type = 'text/javascript';
  jqueryJS.src = '/static/js/jquery.js';
  jqueryJS.async = false;
  document.body.appendChild(jqueryJS);

  let pluginsJS = document.createElement('script');
  pluginsJS.type = 'text/javascript';
  pluginsJS.src = '/static/js/plugins.js';
  pluginsJS.async = false;
  document.body.appendChild(pluginsJS);

如果我运行应用程序，jQuery 不一定会在缩小的自定义 JS 插件之前加载。 如何先加载 jQuery 再加载缩小的自定义 JS 插件？

【问题讨论】：

请分享您现在是如何加载 jquery 的。例如，如果你在 Vue 之前用普通的 script 标签包含它，它肯定应该在之前加载。

var $ = jQuery.noConflict(); 在plugins.js 的顶部

【参考方案1】：

你可以使用vue-script2

import VueScript2 from 'vue-script2'
...
mounted() 
  VueScript2.load('/static/js/jquery.js').then(function () 
    VueScript2.load('/static/js/plugins.js')
  )

【讨论】：

我已经像 Vue.use(VS2) 一样导入了 VueScript2。当我使用它时会出现错误[Vue warn]: Error in mounted hook: "ReferenceError: VueScript2 is not defined"

@YosuaLijantoBinar 使用前需要导入。我已经编辑了答案，你可以用 VS2 替换 VueScript2，没关系，关键是 Vue.use 用于 script2 标签，而要务实地使用它，你需要每次都导入它

我可以为整个应用导入一次吗？我在main.js 导入它，但VueScript2 无法在App.vue 访问。

@YosuaLijantoBinar 你可以这样做 -> ***.com/a/48652504/239354

@YosuaLijantoBinar 你到底是怎么用的？请记住，这将在那时改变