将 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 应用程序中的本地脚本注入不同的组件的主要内容,如果未能解决你的问题,请参考以下文章