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

Posted

技术标签:

【中文标题】将 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 中重新编写了所有脚本。还是谢谢!

以上是关于将 vue.js 应用程序中的本地脚本注入不同的组件的主要内容,如果未能解决你的问题,请参考以下文章

说说说vue.js中的组

(Nuxt.js/Vue.js) - 脚本只运行一次,更改路由/刷新页面后停止运行

Vue.js 依赖注入

Vue.js:将页面标题分配给不同的路线

OpenCL 内核中的组内同步,在本地内存上使用自旋锁

端口错误:heroku 中的 vue.js+node.js 项目