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

猜你喜欢

转载自blog.csdn.net/qinqinzqq/article/details/126867635