vue里面使用iframe标签，引入一个.html文件，将其设置为页面的动态背景，但是页面一直显示404

一、问题

把要引入的文件dian.html放在了public的js下面,在iframe标签的src里面引入该文件，但是页面上是一直显示404（dian.html里面是飘来飘去的点点）。

1.这是没有引入iframe标签的情况

2.这是引入iframe标签的情况

3.原代码

<template>
    <div class="screen-container">
        <!--  引入会动的小点点  -->
        <div class="canvas" style="opacity: .2">
            <iframe  frameborder="0" src="public/js/dian.html" style="width: 100%; height: 100%"></iframe>
        </div>
        <header class="screen-header">
            <div>  <!--/img/header_border_dark.png-->
                <img src="../static/img/header_border_dark.png" alt="">
            </div>
            <span class="logo">
       <!-- <img src="../static/img/logo_dark.png" alt="" />-->
           </span>
            <span class="title">大屏温度监控系统</span>
            <div class="title-right">
                <!--<img src="static/img/qiehuan_dark.png" class="qiehuan" alt="">-->
                <!--<span class="datetime">2049-01-01 00:00:00</span>-->
                <!--<span class="datetime">2049-01-01 00:00:00</span>-->
                <span class="datetime"></span>
            </div>
        </header>
        <div class="screen-body">
            <section class="screen-left">
                <div id="left-top" >
                    <!-- 销量趋势图表 -->
                    <zhexiantu></zhexiantu>
                    <!-- icon-compress-alt -->
                </div>
                <div id="left-bottom" >
                    <!-- 商家销售金额图表 -->
                    <!-- icon-compress-alt -->
                    <left></left>
                </div>
            </section>

            <section class="screen-middle">
                <div id="middle-top" >
                    <!--商家分布图表-->
                    <!-- icon-compress-alt -->
                    <Map></Map>
                </div>
                <div id="middle-bottom" >
                    <!-- 地区销量排行图表 -->
                    <!-- icon-compress-alt -->
                    <zhuztu></zhuztu>
                </div>
            </section>

            <section class="screen-right">
                <div id="right-top" >
                    <!-- 热销商品占比图表 -->
                    <!-- icon-compress-alt -->
                    <bingtu></bingtu>
                </div>

                <div id="right-bottom" >
                    <!-- 库存销量分析图表 -->
                    <!-- icon-compress-alt -->
                    <huantu></huantu>
                </div>
            </section>
        </div>
    </div>


</template>
<script>
    export default {
        name: 'tempScreen',
        components: {
           /* bingtu,
            huantu,
            left,
            Map,
            zhexiantu,
            zhuztu*/
        },
        data() {
            return {
                url:'https://www.baidu.com/'
            }
        },
        methods: {
            handle(){
                this.url='http://itcast.cn';
            }
        }
    }
    var t = null;
    t = setTimeout(time, 1000);//開始运行
    function time() {
        clearTimeout(t);//清除定时器
        var dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours();//获取时
        var m = dt.getMinutes();//获取分
        var s = dt.getSeconds();//获取秒
        document.querySelector(".datetime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day+ "日" + "-" + h + "时" + m + "分" + s + "秒";
        t = setTimeout(time, 1000); //设定定时器，循环运行
    }

</script>

<style lang="postcss" scoped>
    .canvas{
        position: absolute;
        width:100%;
        left: 0;
        top: 0;
        height: 99%;
        z-index: 1;
    }
    .screen-container {
        width: 100%;
        /* 这里给百分之百，高度就变小了   */
        height: 100%;
      /*  height:1008px;*/
        padding: 0 20px;
        /*定义的所有的容器都为黑色 */
        /*background-color: #161522;*/
        /* 这里是设置背景的，不是在body里面  */
        background: url(../static/images/bg.jpg) no-repeat top center;
        color: #fff;
        box-sizing: border-box;
    }

    .screen-header {
        width: 100%;
        height: 64px;
        font-size: 20px;
        position: relative;
    }

    .screen-header div img{
        height: 54px;
        width: 100%;
    }

  
    .title {
        position: absolute;
        left: 50%;
        top: 50%;
        font-size: 20px;
        transform: translate(-50%, -50%);
    }
    .title-right {
        display: flex;
        align-items: center;
        position:absolute;
        right: 0px;
        top: 50%;
        transform: translateY(-80%);
    }
    
    .datetime {
        font-size: 15px;
        margin-left: 10px;
    }
    .logo {
        position: absolute;
        left: 0px;
        top: 50%;
        transform: translateY(-80%);}
    .logo img {
        height: 35px;
        width: 128px;
    }
    /*img {
      height: 35px;
      width: 128px;
    }
    }
    }*/
    .screen-body {
        width: 100%;
        height: 100%;
        display: flex;
        margin-top: 10px;}

    .screen-left {
        height: 100%;
        width: 27.6%;}

    #left-top {
        height: 53%;
        position: relative;
    }

    #left-bottom {
        height: 31%;
        margin-top: 25px;
        position: relative;
    }

    .screen-middle {
        height: 100%;
        width: 41.5%;
        margin-left: 1.6%;
        margin-right: 1.6%;}

    #middle-top {
        width: 100%;
        height: 56%;
        position: relative;
    }
    #middle-bottom {
        margin-top: 25px;
        width: 100%;
        height: 28%;
        position: relative;
    }
    .screen-right {
        height: 100%;
        width: 27.6%;}
    #right-top {
        height: 46%;
        position: relative;
    }
    #right-bottom {
        height: 38%;
        margin-top: 25px;
        position: relative;
    }
     section > div{
       border: 1px solid red;
     }
    
</style>

4. 引入的文件位置

二、解决办法 

1.原因：在vue里面打包好的项目就以public为根目录的,所以src直接引用即可，不能再加public。

2.修改后的代码（其余代码不变）

<div class="canvas" style="opacity: .2">
    <iframe  frameborder="0" src="js/dian.html" style="width: 100%; height: 100%"></iframe>
</div>

 3.最后页面