qiankun 微前端应用实践与部署（四）

一般情况下，我们对应用进行配置打包，要对图片字体等资源进行下面配置，使得资源路径正常加载。但是，在微前端模式下，子应用打包部署后，往往会出现子应用 css 文件里面引入资源路径加载失败的问题，下面就让我们来探究一下。

👉 独立应用下的 url-loader 配置：

// vue-cli 2 写法

module: {
   
  rules: [
    {
   
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: "url-loader",
      options: {
   
        limit: 10000,
        // 此处的 utils.assetsPath 是函数，返回根据配置项拼接好的路径，如 static/fonts/[name].[hash:7].[ext] 
        name: utils.assetsPath("img/[name].[hash:7].[ext]")
      }
    },
    {
   
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
      loader: "url-loader",
      options: {
   
        limit: 10000,
        // 此处的 utils.assetsPath 是函数，返回根据配置项拼接好的路径，如 static/fonts/[name].[hash:7].[ext] 
        name: utils.assetsPath("fonts/[name].[hash:7].[ext]")
      }
    }
  ]
}

因为 url-loader 的 options 项的属性 publicPath 属性默认是 ''，表示相对路径，即打包出来的资源引用 url 都会加上相对路径寻找 static 静态资源入口，比如：

/* static/cs