iframe框架中src相对路径问题

遇到问题

        vue项目中使用的iframe框架，需要内嵌一个静态页面，使用的相对路径，本地运行没有问题，但是打包之后报错404

解决思路

        由于使用的是相对路径，报错之后第一反应是考虑是不是打包之后的路径出现了问题，于是google了vue打包之后的dist目录分别对应的内容：

vue项目打包后dist文件目录详解

         css文件夹下的.css文件是项目要用到的css文件,当你做webpack打包的时候，会把所有的css样式打包到这里
        css文件夹下的.css.map文件是一个Source map文件，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。目的是帮助我们调试被压缩过的css代码，只是方便我们开发的时候做调试使用。
        js文件夹下的.js文件是我们写的各个vue组件；.js.map依然是Source map文件，方便我们开发时调试js代码使用。
        app.js文件里放的是项目中各个页面的逻辑代码
        manifest.js文件可以理解为webpack打包生成的一个配置文件，我们一般不需要关心它
        vendor.js放的是各个页面各个组件公用的一些代码
        index.html使我们前端代码入口的一个html文件

src相对路径

        我们在使用 iframe 引用本地的静态 html 文件，静态文件需要放置在和 src 同级的文件加夹 static 中，如图：

         在使用 iframe 的地方直接写的“相对路径” ，如下图：

         这里的路径，在打包后不会变化。都是根据打包后的路径查找静态文件，因此上方用 “相对路径” 描述并不准确，而是打包后的 “相对路径”，看下图就明白了，这是 打包后的文件层级关系：

        这里我写了很多 ../../../，最后发现真实的引用路径还是http://localhost:8080/static/blog.html，因为向上查找已经到根目录了，所以不管写多少个../，实际路径还是http://localhost:8080/static/blog.html，因此 下方路径直接写 ./static/blog.html 也是一样的，根据上方打包后的层级关系对照一下就明白了。