将 vue.js 应用程序中的本地脚本注入不同的组件

Posted 2023-02-22

【中文标题】将 vue.js 应用程序中的本地脚本注入不同的组件

【英文标题】：inject local script in vue.js app to different components

【发布时间】：2020-12-20 10:44:45

【问题描述】：

我搜索了一个答案，但我找不到我的问题的答案。

我正在做一个 vue 项目，使用 vue-cli，我需要将不同的脚本注入到不同的页面（我使用 vue-router），更多细节即将到来：

这是我所拥有的：

o public
|
|-index.html
|
|-js
| |-script_for_all_pages.js
| |-script_for_index1.js
| |-script_for_index2.js ...

o src (my vue project)

这就是我想要的：

我想在 localhost/* 的 html 中有一个<script src="js/script_for_all_pages.js"></script> 我想在 localhost/index1 的 html 中有一个 <script src="js/script_for_index1.js"></script> 我想在 localhost/index2 的 html 中有一个<script src="js/script_for_index2.js"></script>

我通过将<script> 标记添加到我的公共文件夹中的 index.html 来完成第一步，但我不知道如何执行最后两个步骤。这些路由（localhost/indexx）是组件，所以我想我应该将我的脚本注入组件index1.vue，但是当我尝试使用import "../js/index.js"; 导入它时出现一堆错误。而且我不知道该怎么做，无论我尝试什么。

没用的包列表：

vue-inject-js

vue-plugin-load-script

感谢您的帮助！

【参考方案1】：

这就是我在 Vue/React 中的做法，只需将这个函数放在帮助程序中，并在创建时从任何组件调用它：

public injectScript(url, loadAsync=true): HTMLScriptElement 
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.async = loadAsync;
    script.src = url;
    document.head.appendChild(script);
    return script;

如果您使用 JS，请忽略类型。您还可以使用返回的脚本对象来跟踪事件：

const script = injectScript("...");
script.onLoad = () => /*do something*/

此外，请确保将其限制为外部小部件。 如果这是您的代码，那么肯定有更好的方法。

【讨论】：

将您的答案标记为已接受，但我无法尝试，因为我在 vue 中重新编写了所有脚本。还是谢谢！