我需要在Vue.js组件中包含来自外部JS文件的函数 . 我引用了this answer来弄清楚如何在我的webpack配置中加载外部文件 . 我目前的设置如下:
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 component
import { iFrameResize } from 'iframeresize'
export default {
name: 'FMFrame',
mounted () {
iFrameResize()
}
}
但是,我现在从vue-router收到错误 .
[vue-router]无法解析异步组件默认值:ReferenceError:iframeresize未在路由导航期间定义[vue-router]未捕获错误:ReferenceError:iframeresize未定义
从外部文件加载函数时是否缺少一个步骤?我可以直接从 index.html
加载时使用该函数,但后来我得到一个警告,该函数未定义,因为我的webpack配置似乎被忽略了 .
2 回答
我相信这种情况正在发生,因为您正在使用“命名”导入 . (例如带括号)
如果要使用大括号,则命名导入必须包含导出 .
那么foo.js应该包含
因此,在您的情况下,您需要使用默认导入而不使用括号,这将自动包含在
export default
语句中 .只需使用'默认'导入语法 .
并非真正重要但只是为了帮助理解,通过使用特殊名称
default
实际上可以使用大括号导入默认导入此外,如果模块中有多个命名导出,则可以将它们全部导入,然后按属性引用它们 .
一个问题可能是导入表达式,改为:
UPDATE :刚刚转载问题,上面的导入工作正常 .
NOTE 还记得在你的html-webpack-plugin实例之后实例化插件
HtmlWebpackExternalsPlugin
(参见Usage section of the docs)这是我使用的插件配置(更改全局选项值):