Question

我需要在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组件

import { iFrameResize } from 'iframeresize'

export default {
  name: 'FMFrame',
  mounted () {
    iFrameResize()
  }
}

但是，我现在从vue-router收到错误。

[vue-router]无法解析异步组件默认值：   ReferenceError：未定义iframeresize
     路线导航期间
[vue-router]未捕获错误：

ReferenceError：未定义iframeresize

从外部文件加载函数时是否缺少一个步骤？我可以直接从index.html加载时使用该函数，但随后我收到一个警告，该函数未定义，因为我的webpack配置似乎被忽略了。

Answer 1

我相信这种情况正在发生，因为您正在使用“命名”导入。（例如用括号）

如果要使用大括号，则命名导入必须包含导出。

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();

Answer 2

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

import iFrameResize from 'iframeresize'

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

注意还要记住在html-webpack-plugin实例后实例化插件HtmlWebpackExternalsPlugin（参见Usage section of the docs）

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

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

在Vue.js 2组件中加载时未定义Webpack外部JS文件

2 个答案: