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

时间:2018-12-04 16:05:25

标签: javascript html vue.js webpack vuejs2

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

enter image description here

所以我要链接的文件是components / Sshy,目标文件(我相信)将是../javascripts/

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

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

像这样:

enter image description here

我正在尝试对不太适合作为模块导出并像这样导入的已编译文件进行等效操作。我发现可以将脚本附加到单个文件组件的建议是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会报告它,就像发生在index.html中,其中注入了我的Vue文件一样。在搜索中,似乎真正的原因可能是文件未正确连接(Here

尽管如此,我仍无法找出问题所在。

1 个答案:

答案 0 :(得分:0)

无效的src路径(即../javascripts/test.js)可能是问题所在。您的服务器可能配置了index.html后备,如果找不到文件,则会返回该后备。您可以在浏览器的开发人员工具中确认这一点(在“网络面板”中找到test.js)。由于HTML文件(可能以<head>开头)源自<script>,因此对于<的{​​{1}}字符,您会遇到JavaScript语法错误。

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