Question

我有一个调用外部API的外部JS文件，但是将其存储在本地时无法在Vue中调用该文件。你如何做到的？

以下内容可以很好地工作并连接到API。

const cnp = document.createElement('script');
cnp.setAttribute('src', https://example.com/cnp.js);
document.head.appendChild(cnp);

此版本或此版本的任何其他变体均不起作用。

const cnp = document.createElement('script');
cnp.setAttribute('src', '@/js/cnp.js');
document.head.appendChild(cnp);

cnp.js包含

console.log('Hello');

var wpwlOptions = {
    style: "plain",
    onReady: function() {
        console.log('wpwlReady.');

        var p = document.querySelector('form.wpwl-form-card');
        p.style.background = 'none';
    }
}

Answer 1

您可以为此使用js模块。

1。从cnp.js文件导出功能。

如果要导出所有文件，请在文件末尾添加export default App。或者，如果您要导出某些变量，可以这样做：

select a.*
from (select *, lag(CustomerItemFrequency) over (partition by CustomerId order by RankByPurchaseFreq) as prev_if
      from #TPROP
     ) a
where prev_if < a.CustomerItemFrequency

2。随时将其导入：

export default cnp;

或者如果您要导出某些变量：

export var wpwlOptions = () => {
    ...
}

Answer 2

放置在公共文件夹中；放置在公用文件夹中的任何静态资产都将被简单复制，而不会通过webpack。您需要使用绝对路径引用它们。

因此，您可以将外部JS放在公用文件夹中，并使用其路径执行JS文件。有关更多参考，请遵循https://cli.vuejs.org/guide/html-and-static-assets.html#html

由于它不会通过webpack，因此不建议这样做。我建议您将此JS调用放置在任何Vue生命周期挂钩中，因为将其放置在公用文件夹中不是一个好习惯。

如何加载外部本地JS文件

2 个答案: