question

Vue embeds a native front-end three-piece set (html+CSS+JavaScript), and the front-end page does not respond after running

detailed question

The author uses the vue framework for development, and uses echarts for large-scale visualization, but most of the echarts large-screen visualization templates provided on the Internet use native front-end three-piece sets (html+CSS+JavaScript), the most convenient way to integrate these echarts large-screen visualization templates That is, the native front-end three-piece set (html+CSS+JavaScript) embedded in vue is used, but the front-end page does not respond after the author embeds and runs it.
The reason for this problem is that the author's embedding step is
1. Put the echarts visualized large-screen template file under assets
insert image description here

2. The author embeds the core code

<template>
  <div>
    <iframe :src="nativeTemplate"  width="100%" height="800px" scrolling="auto"></iframe>
  </div>
</template>


<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      nativeTemplate: require('/src/assets/nativeTemplate')
    };
  }
};

</script>
<style scoped>

</style>

solution

1. Put the echarts visual large-screen template file into the public
insert image description here

2. Modify the embedded core code. Note that you can directly write the file path under public here. For the author, since the file path is located in public/nativeTemplate/index.html, it is directly modified to /nativeTemplate/index.html

<template>
  <div>
        <iframe src="/nativeTemplate/index.html"  width="100%" height="800px" scrolling="auto"></iframe>
  </div>
</template>


<script>
export default {
    
    

};

</script>
<style scoped>

</style>

cause

When embedding the native front-end three-piece set (HTML+CSS+JavaScript), the wrong path or method was used (I take it for granted that it is consistent with the image access method. In fact, require is the syntax used to import modules in JavaScript. does not work for directly specifying the path to an HTML file.), resulting in an unresponsive page.

solve the cause

By placing the file in the public directory and directly specifying the correct file path, (modify the embedded core code, directly set the src attribute of the iframe to the correct file path. Set src to the correct path to ensure that the file can be loaded correctly. )

references

Causes and solutions refer to chatgpt

It’s not easy
to be original, please indicate the source
if it’s helpful to you, don’t forget to like it and support it
insert image description here

Vue embedded native front-end three-piece set (html+CSS+JavaScript)