前言

在使用qiankun做微前端的过程中，子应用在主应用（基座）的过程中出现静态资源404问题

要是小的图片什么的，倒是可以转为base64字符，但总是治标不治本，那要是大文件，静态js文件呢，所以还是需要去解决根本性问题

问题描述

如下一个vue2.0项目示例，子应用单独访问，正常显示

image.png

qiankun主应用中访问

image.png

看浏览器资源静态资源访问情况，404

这个问题其实很简单，原因是子应用放入到基座中后，静态资源会默认走主应用地址去访问，但是主应用又没有这些静态资源文件，其结果显而易见，肯定是404了。

解决

问题解决方法其实很简单，了解webpack就很能理解问题原因了。publicPath 设置静态资源路径问题。默认是走的相对路径。在基座中访问解决404问题，

你需要将你的 webpack publicPath 配置设置成一个绝对地址的 url，改为绝对路径即可，即子应用部署之后的地址，本地调试的时候，写本地服务地址即可

vue.config.js文件

module.exports = {
    // 设置静态资源访问路径为绝对路径
    publicPath:'http://192.168.93.107:8080/',
    //修改打包配置
    configureWebpack: {
        output: {
            //输出暴露的名称,假设名称为vueApp
            library: 'vueApp', //输出暴露的类型
            libraryTarget: 'umd'
        }
    },
    //允许跨域
    devServer: {
        headers: {
            'Access-Control-Allow-Origin': '*'
        }
    },
}

重新启动后，就能可以正常范围了