Question

我已经看了，我没找到。我有一个来自外部js文件的网址，我在我的index.html中导入。应用程序启动时正在加载文件。

但是，用户不会经常使用这些功能;我想仅在调用特定组件时才上传此文件。

我正在使用带有模板webpack的vue cli（vue 2）。

我尝试过类似的事情：

import * as PagSeguroDirectPayment from 'https://stc.sandbox.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js';

required('https://stc.sandbox.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js');

他们没有工作。

需要上传此文件才能使用支付网关。有人可以帮助我吗？

Answer 1

创建一个单独的js文件并从链接中复制脚本，而不是在index.html中使用它。将所需的方法导出到js文件中，并将其导入所需的组件中。

Answer 2

这是vue所具有的功能之一，让人相信它经过深思熟虑。要做到这一点，实际上超级简单。

我在我的路线中使用这个：

// home gets loaded always
const Home = import('@/pages/home')

// profile and account gets loaded on demand
const Profile = () => import('@/pages/profile')
const Account = () => import('@/pages/account')

与webpack一起使用时，会为每个组件生成单独的文件。（01.js，02.js等）这些文件将根据需要加载。

如何在我的组件VUE 2（webpack）中加载外部js文件？

2 个答案: