Javascript 加载到Vue.JS 2组件时未定义Webpack外部JS文件

我需要在Vue.JS组件中包含来自外部JS文件的函数。我已经参考了如何在我的网页配置中加载外部文件。我当前的设置如下所示：

webpack.dev.conf.js

const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')

[...]

new HtmlWebpackExternalsPlugin({
  externals: [{
    module: 'iframeresize',
    entry: 'https://[...]/iframeResizer.min.js',
    global: 'iframeresize'
  }]
})

index.html

<script src="https://[...]/iframeResizer.min.js"></script>  

但是，我现在从vue路由器收到一个错误

[vue路由器]无法解析异步组件默认值： ReferenceError:未定义iframeresize

[vue路由器]在路由导航过程中出现未捕获错误：

ReferenceError:未定义iframeresize

---

从外部文件加载函数时是否缺少一个步骤？当直接从

index.html

加载时，我可以使用该函数，但随后我收到一条警告，该函数未定义，因为我的网页配置似乎被忽略。

一个问题可能是导入表达式，更改为：

import iFrameResize from 'iframeresize'

更新：刚刚重现了问题，上述导入工作正常

注意还记得在您的html网页包插件实例之后实例化插件

HtmlWebpackExternalsPlugin

（请参阅）

这是我使用的插件配置（更改全局选项值）：

新的HtmlWebpackExternalsPlugin({
外部：[
{
模块：“iframesize”，
条目：'https:///iframeResizer.js',
全局：“iframesize”
}
]
}),

我认为这是因为您正在使用“命名”导入。（例如，使用支架）

如果要使用大括号，则指定的导入必须包含导出

import {foo} from 'foo'

那么foo.js应该包含

export const foo = ...

因此，在您的情况下，需要使用不带大括号的默认导入，它将自动包含在

export default

语句中

只需使用“默认”导入语法

import foo from 'foo'

不是很重要，只是为了帮助理解，默认导入实际上可以通过使用特殊名称

default

import { default as foo } from 'foo'; 

此外，如果模块中有多个命名导出，则可以全部导入它们，然后按属性引用它们

import * as foo from 'bar'; // has two named exports doThis and doThat

//reference the named exports later with.. 

foo.doThis();
foo.doThat();

---

只是要指出，如果使用外部webpack插件，则无需将脚本标记包含到index.html中。

import { default as foo } from 'foo'; 

import * as foo from 'bar'; // has two named exports doThis and doThat

//reference the named exports later with.. 

foo.doThis();
foo.doThat();