1.问题描述
- 目前有个需求，是需要将项目A打包之后放项目B里，通过
iframe嵌入方式，使A包能在项目B中使用。 - 我们以vue项目作为A项目打包为例；
2. 解决方案
- 当我们直接通过
npm run build进行打包，直接通过iframe嵌入的话，是打不开的，就如同通过双击操作点击A项目包里的index.html一样，是根本打不开的，并且还会报错Failed to load resource: net::ERR_FILE_NOT_FOUND - 所以我们首先要先解决，项目双击能打开打包后项目的问题，该问题的具体解决方案在该文章下：Vue项目打包，如何双击index.html即可静态访问？
- 其次我们需要将项目A包 放到项目B的
public文件夹下； 此时我们的A包是和index.html是同级的。
public文件夹
2.1 通过iframe引入 ，项目B是通过react框架写的，其实都一样的，引用方式如下：
import React, { useEffect, useState } from 'react';
const publicIframe = () => {
return (
<div style={{ height: '100%' }}>
<iframe title='vue-question' frameborder="0" style={{ width: "100%", height: '100%' }} src="/vue-question/index.html" className="card full-iframe"></iframe>
</div>
);
}
export default publicIframe;
-
注意： iframe嵌入的地址是
src="/vue-question/index.html"此时'/'默认就是public文件夹。
文章参考
- 之前我写过一版，基于nodejs将ElementUI官方文档部署到本地 该文章时直接通过node服务启动element包的，其实也能通过该方式进行一个或者多个文档官网，都打包到自己的项目上，这样就能实现一次就能启动多个项目服务了，尤其是内网开发的同学。
