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

Question

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

我正在做一个 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/*

<script src="js/script_for_all_pages.js"></script>

我想在 localhost/index1

<script src="js/script_for_index1.js"></script>

我想在 localhost/index2

<script src="js/script_for_index2.js"></script>

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

无效的软件包列表：

vue-inject-js

vue-plugin-load-script

感谢帮助！

Answer 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.js 应用程序中的本地脚本注入不同的组件

inject local script in vue.js app to different components

javascript

vue.js

vue-cli