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包的，其实也能通过该方式进行一个或者多个文档官网，都打包到自己的项目上，这样就能实现一次就能启动多个项目服务了，尤其是内网开发的同学。