vue项目用iframe嵌入另外一个vue项目(cesium)

news/2024/11/23 5:29:42/

vue项目用iframe 项目嵌入另外一个vue项目,主要分2种情况,一种情况是嵌入本地项目,另外一种是嵌入用web服务器启动的vue项目。

1)嵌入本地项目

      vue create hello-world 创建项目后, 用npm run build打包,把dist目录下文件拷贝到主vue项目public/static目录下,采用iframe嵌入,代码如下:

    <iframeref="iframeModel"src="/static/dist/index.html"style="width: 100vw; height: 100vh"    frameborder="0"></iframe>

注意iframe标签src属性的写法。

不幸的是会报错,hello-world  vue项目需要修改vue.config.js, 添加publicPath属性,如下所示:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,publicPath: "./",
})

重新npm run build.

如果要被iframe嵌入的项目集成了cesium,用这种方法,cesium在加载地图时会报错,需要采用web服务器启动这个vue项目。如下面所述:

2)用web服务器启动vue项目

     用web服务器启动vue项目的方法很多,例如采用tomcat服务器,nodejs服务器,nginx服务器。这里我们用nginx服务器启动vue项目。修改nginx.conf配置文件(D:\software\nginx-1.24.0\conf\nginx.conf),如下所示:

        location / {root   D:\web\vue\vue2-cesium\dist;index  index.html index.htm;}

然后启动nginx, start nginx.exe。iframe嵌入代码如下:

    <iframeref="iframeModel"src="http://127.0.0.1:80/"style="width: 100vw; height: 100vh"    frameborder="0"></iframe>

这样三维地球就能正常打开了,如下图所示:

 


http://www.ppmy.cn/news/569246.html

相关文章

三菱伺服e6、e7报警显示、常见报警处理

需求:机器运行中轴突然报警,执行了启动请求,原因:指令冲突,逻辑没有互锁 1、 轴状态获取 2、 案例;自动下的jog和定位启动互锁 需求:伺服驱动器显示e6或者e7报警,原因:没有电池或者紧急停止信号为ON 1、检查电池是否安装,紧急停止线是否断开 2、 如果不使用外部…

i春秋网络安全公益赛 web easythinking thinkphp6.0 session任意创建文件、getshell

首先进来看到url很熟悉&#xff0c;直接访问/user/member/index&#xff0c;发现爆错爆出了版本号 随后去网上搜索thinkphp 6.0漏洞&#xff0c;发现了最近的下面这篇文章 https://www.uedbox.com/post/65126/ 该漏洞可以在目标环境开启session的条件下任意创建文件&#xf…

i春秋网络安全公益赛 web blacklist利用mysql特性handler进行堆叠注入

题目过滤了很多东西&#xff0c;之前题目的利用set进行堆叠注入行不通了 但是去年看过飘零师傅的fudanctf的wp&#xff0c;嘻嘻&#xff0c;利用mysql的handler进行注入。 https://www.4hou.com/posts/mM60 11’; handler FlagHere open as tgt;handler tgt read next;–

初中计算机卡片的制作教案,卡片的制作教案..doc

文档介绍&#xff1a; EvaluationWarning:ThedocumentwascreatedwithSpire..毕制季语宣史命贤犀阎胰钞坝邻尊某裔槽察欠缎素于旁免嘉萄挖漓鹃一痒了娟辕傈馁缆拖呵尊醇皮寐质父溜倔书凳虹衫涣知茨遇汽吸墩角帧淹毡赔褂他眷陡宏岸才关凭送财酞厘梅园阔泻又索歧醒棠努秸畏在猫深匈…

腾讯犀牛鸟网络安全T-Star高校挑战赛writeup

高校组 今天你吃了吗战队WRITEUP 三、 解题过程 题目一 签到 操作内容&#xff1a; Js检测&#xff0c;禁用js即可上传 http://588f25a5.yunyansec.com/upload/2.php 蚁剑连接即可 如该题使用自己编写的脚本请详细写出&#xff0c;不允许截图 flag值&#xff1a; key{K735c…

如何通过NLP人工智能大规模分析评论文本洞察消费者心声(干货)

作为市场负责人&#xff0c;你知道用户在想什么吗&#xff1f; 你的产品带给用户的使用体验是什么样的&#xff1f; 用户最关注产品的核心功能是什么&#xff1f;当前日益 激烈的竞争环境下&#xff0c;作为品牌企业&#xff0c;应该如何利用大数据和人工智能技术对消费者进…

水晶的功效大全

一般水晶类&#xff1a; 白水晶 1.白水晶又称官运石,可以升官旺运,息灾增益,活络亲情友情. 2.白水晶是所有光色的综合体代表平衡,圆满. 3.用于祈福,许愿效果最佳,也可当护身符,平安符使用. 4.更可增加人体能量,增强视力,改善风水.吸收电磁波效果最佳. 5.白水晶能增强记忆最适合…

首先请与所有现有链接到该网络共享的映射断开连接_嘉兴快速路环线时代来了!这12张主城楼盘片区地图,请收好...

昨日&#xff0c;嘉兴有大事发生。 全城期待的主城区快速路环线工程&#xff0c;正式开工&#xff01; 顷刻之间&#xff0c;新闻刷遍了嘉兴人的朋友圈。 有关快速路开工的具体内容&#xff0c;本文不再重复&#xff0c;请移步至嘉兴小新微信公众号---【嘉兴头条】快速路环线工…