Vue.js 2组件中Webpack外部JS的iframeresize未定义问题求助

Hey there, let's break down why you're running into this Vue Router error even after configuring webpack to load your external JS file. Here are the most common fixes to get that iframeresize function working properly:

1. Verify Your Webpack Externals Configuration #

When you set up externals in webpack.dev.conf.js, you're telling webpack to use a global variable instead of bundling the module. The most common mistake here is a mismatch between the global variable name your external script exposes and what you've defined in webpack.

For example, if your external script creates a global window.iframeResize (note the capital R), but your webpack config references iframeresize (all lowercase), that's a guaranteed error. Double-check the script's actual exposed name, then adjust your config:

// webpack.dev.conf.js
module.exports = {
  // ... other configuration
  externals: {
    // Left: the name you'll import in your component
    // Right: the exact global variable from the external script
    'iframe-resizer': 'iframeResize'
  }
}

Then in your component, import it using the name you defined on the left:

import iframeResize from 'iframe-resizer';

2. Ensure the External Script Loads Before Your Vue App #

If you're adding the external script via a <script> tag in index.html, its loading order matters. If Vue/Router initializes before the script finishes loading, your async component will try to access iframeresize before it exists.

Fix this by placing the external script before your Vue and Vue Router scripts:

<!-- index.html -->
<script src="/path/to/your/iframe-resize-script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3/dist/vue-router.js"></script>

If you need to load the script asynchronously, add a route guard to wait for it before rendering the component:

// router/index.js
router.beforeEach((to, from, next) => {
  // Replace 'YourAsyncComponent' with your actual route name
  if (to.name === 'YourAsyncComponent' && typeof iframeResize === 'undefined') {
    const script = document.createElement('script');
    script.src = '/path/to/your/iframe-resize-script.js';
    script.onload = () => next();
    script.onerror = () => next(new Error('Failed to load iframe resize script'));
    document.body.appendChild(script);
  } else {
    next();
  }
});

3. Explicitly Reference the Global Variable in Your Component #

Sometimes webpack's externals setup can have scoping issues with async components. To rule this out, directly reference the global variable from window in your component:

<template>
  <iframe ref="targetIframe" src="your-iframe-source.html"></iframe>
</template>

<script>
export default {
  mounted() {
    // Double-check the global exists before using it
    if (window.iframeResize) {
      window.iframeResize({
        // Your resize options here
      }, this.$refs.targetIframe);
    } else {
      console.error('External iframe resize script hasn\'t loaded yet');
    }
  }
}
</script>

4. Double-Check for Typos in the Function Name #

It's easy to mix up casing or spelling. Confirm the exact function name your external script provides—some libraries use iframeResize (camelCase) instead of iframeresize (all lowercase). A quick check in your browser's dev tools Console by typing iframeResize (or your guess) will tell you if the global exists.

内容的提问来源于stack exchange，提问作者Morgan