如何加载外部本地JS文件

时间:2020-05-26 16:42:37

标签: vue.js

我有一个调用外部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';
    }
}

2 个答案:

答案 0 :(得分:0)

您可以为此使用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 = () => {
    ...
}

答案 1 :(得分:0)

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

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

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