iframe框架中src相对路径问题

最新推荐文章于 2024-03-18 22:18:49 发布

qinqinzqq

最新推荐文章于 2024-03-18 22:18:49 发布

阅读量4.2k

点赞数 2

分类专栏： vue 文章标签：前端

本文链接：https://blog.csdn.net/qinqinzqq/article/details/126867635

版权

vue 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

遇到问题

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 也是一样的，根据上方打包后的层级关系对照一下就明白了。