vue中通过iframe方式加载本地的vue页面

vue中通过iframe方式加载本地的vue页面

也是在实际的项目中碰到一个奇葩的需求，用vue，居然还要用到iframe，真是脑壳大，试了好多次最后才找到了正确的方法。

总共有三种方法吧

iframe方式加载本地的vue页面的第一种方法

就是直接使用具体的页面地址：http://127.0.0.1:8080/Index

<iframe
  src="http://127.0.0.1:8080/Index"
  id="frames"
  frameborder="0"
  sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
  style="height: 100%; width: 100%"
></iframe>

iframe方式加载本地的vue页面的第二种方法

跟第一种方法类似，就是将127改为了localhost

<iframe
  src="http://localhost:8080/Index"
  id="frames"
  frameborder="0"
  sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
  style="height: 100%; width: 100%"
></iframe>

不过，注意一下，第一种和第二种方法只能在本地访问时生效，当打包部署到线上后，就会出现页面找不到的问题，不能部署那用处少了太多，这时要用第三种方法

iframe方式加载本地的vue页面的第二种方法

第三种方法跟页面中用相对路径引用图片的方式差不多，就是：…/index，这里的路径的路由中的路径

<iframe
  src="../index"
  id="frames"
  frameborder="0"
  sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
  style="height: 100%; width: 100%"
></iframe>

// 或者是像这样的路径
<iframe
  src="../#/index"
  id="frames"
  frameborder="0"
  sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
  style="height: 100%; width: 100%"
></iframe>

像第三种方法，就可以实现在打包部署在线上时，正确访问到相应的页面。

不过注意一下，当在本地打包成功后，在本地进行测试时，会出现嵌入的页面不是你想要的页面，而是自己项目的树形文件结构。

这是正常的，当部署到线上后，就是正常的页面啦