Vuejs：包含带有 <script> 标签的本地 javascript 文件答案

【问题标题】：Vuejs : Include local javascript file with <script> tagVuejs：包含带有 <script> 标签的本地 javascript 文件
【发布时间】：2021-08-10 12:57:56
【问题描述】：

我想在 vuejs 组件中包含这个 jquery 插件：http://jvenn.toulouse.inra.fr/app/js/jvenn.min.js。

为此，我添加了这些行

mounted () {
  const jvenn = document.createElement('script')
  jvenn.setAttribute(
    'src',
    'http://jvenn.toulouse.inra.fr/app/js/jvenn.min.js'
  )
  jvenn.async = true
  document.head.appendChild(jvenn)
}

它工作正常，但我想拥有此脚本的本地副本，以防此文件不再在线。我尝试将它添加到我的资产目录中，并通过 /static/js/jvenn.min.js 更改 http://jvenn.toulouse.inra.fr/app/js/jvenn.min.js 没有成功。

有什么想法吗？

【问题讨论】：

你不需要先/
"没有成功" - 你做过调试吗？您在使用浏览器控制台和网络窗格吗？
static 不是前缀目录。它在运行和编译时都直接映射到根目录。因此，/js/jvenn.min.js 将起作用。
@FlYiNGPoTAToChiP 和 @Ohgodwhy 它返回错误 $(...).jvenn is not a function
为什么不在你的 index.html 中保持全局？

标签： javascript vue.js venn

【解决方案1】：

假设一个 Vue CLI 脚手架项目，将第三方脚本放在public folder 中，使其成为静态资产：

public
└─js
|  └─jvenn.min.js
└─index.html

然后编辑public/index.html导入脚本：

<body>
  <script src="<%= BASE_URL %>js/jvenn.min.js"></script>
</body>

如果配置了项目的基本 URL，src 中的 <%= BASE_URL %> 前缀很重要。

【讨论】：

【解决方案2】：

如果

js
└─jvenn.min.js
index.html

那么它将只是js/jvenn.min.js

【讨论】：

我应该更清楚地提到，我使用的是vuejs，我在标题中添加了信息