首页 文章

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

提问于
浏览
1

我需要在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 回答

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

    一个问题可能是导入表达式,改为:

    import iFrameResize from 'iframeresize'
    

    UPDATE :刚刚转载问题,上面的导入工作正常 .

    NOTE 还记得在你的html-webpack-plugin实例之后实例化插件 HtmlWebpackExternalsPlugin (参见Usage section of the docs

    这是我使用的插件配置(更改全局选项值):

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

相关问题