尝试将外部脚本附加到 Vue 中的单个文件组件时出错答案

【问题标题】：Error trying to attach external script to single file component in Vue尝试将外部脚本附加到 Vue 中的单个文件组件时出错
【发布时间】：2019-05-06 02:49:25
【问题描述】：

我很难将外部脚本链接到 Vue 中的单个文件组件。我的应用程序结构如下：

所以我要链接的文件是 components/Sshy 并且目标文件（我相信）是 ../javascripts/

这不是我第一次这样做，我已经连接了其他脚本，这些脚本已在其他单个文件组件中成功引用为：

../javascripts/<name>
@/javascripts/<name> (Src is aliased)

像这样：

我正在尝试对不太适合作为模块导出并像这样导入的已编译文件执行等效操作。我发现可以将此脚本附加到单个文件组件的建议是here。

我试着像这样复制这个方法：

  mounted () {
     let testScript = document.createElement('script');
     testScript.async = true;
     testScript.type = "text/javascript";
     testScript.setAttribute('src','../javascripts/test.js');
     document.head.appendChild(testScript);
 },

但不断收到一个错误，似乎表明它没有正确拾取文件。发现的错误是

uncaught syntax error: Unexpected token <

并且 devtools 报告它就像它发生在我的 vue 文件被注入的 index.html 中一样。在搜索中，看起来真正的原因可能是文件连接不正确（Here）

我还没有设法确定问题仍然存在。

【问题讨论】：

标签： javascript html vue.js webpack vuejs2

【解决方案1】：

无效的src 路径（即../javascripts/test.js）可能是问题所在。您的服务器可能配置了 index.html 回退，它会针对未找到的文件返回。您可以在浏览器的开发者工具中确认这一点（在网络面板中找到test.js）。由于 HTML 文件（可能以 <head> 开头）源自 <script>，因此您会收到 <head> 的 < 字符的 JavaScript 语法错误。

您需要将src 路径更新为相对于根文档而不是组件目录。

【讨论】：