关于微前端: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/css/app.e99e9aae.css */

background-header {background: url(../../static/img/bg_header.790a94f4.png);
}

所有利用编译打包部署后，当主利用加载子利用，子利用加载本身的 css 文件款式时，因为 其对应的 css 文件外面的图片 url 援用是相对路径，会呈现子利用的资源相对路径拼接主利用 domain 的状况，即子利用的 ../../static/img/bg_header.790a94f4.png 会在主利用的 domain 下进行资源的寻找，导致加载失败 404 的状况。

解决打包后的 css 背景图片与字体图标门路问题

如果我的项目有用到第三方库，比方 element-ui，那么就更有必要进行解决了。因为 element-ui 的字体图标是在 css 外面引入的，还有相干背景图片的引入也是在 css 里，所以须要配置 webpack 的 url-loader，生产模式状况下间接指定资源前缀，使之成为绝对路径。

module: {
  rules: [
    {test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: "url-loader",
      options: {
        limit: 10000,
        name: utils.assetsPath("img/[name].[hash:7].[ext]"),
        // 这里 192.168.2.192：7100 是子利用部署地址
        publicPath: process.env.NODE_ENV === 'production' ? '//192.168.2.192:7100' : ''
      }
    },
    {test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
      loader: "url-loader",
      options: {
        limit: 10000,
        name: utils.assetsPath("fonts/[name].[hash:7].[ext]"),
        publicPath: process.env.NODE_ENV === 'production' ? '//192.168.2.192:7100' : ''
      }
    }
  ]
}

这样配置后，打包进去的 css 款式文件会变成：

/* static/css/app.e99e9aae.css */

background-header {background: url(//192.168.2.192:7100/static/img/bg_header.790a94f4.png);
}

资源是绝对路径，就不会呈现上体面利用资源加载失败的状况。

然而，这种前端配置文件写死门路的做法灵活性并不好，比方不能做到编译一次，任意部署，因为门路写死，所以如果须要部署到其余服务器的话，就须要从新编译了。

接下来，讲的是实现灵便部署的计划。

联合 nginx 配置资源援用门路代理转发

咱们在只编译打包一次前端利用的前提下，为了实现灵便部署，须要借助 nginx 来实现。

上面以 vue-cli 3 的配置为例，与 vue-cli 2 只是写法上的区别，其余都一样。

不过 vue-cli 3 对 webpack 配置进行了形象，要了解配置中蕴含的货色会比拟艰难，尤其是当咱们须要重写或者调整配置的时候，能够参考 审查我的项目的 webpack 配置。

module.exports = {chainWebpack: (config) => 

    config.module
      .rule("fonts")
      .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/)
      .use("url-loader")
      .loader("url-loader")
      .options({
        limit: 4096,
        name: 'static/fonts/[name].[hash:8].[ext]',
        publicPath: process.env.NODE_ENV === 'production' ? '/live' : '',
      });

    config.module
      .rule("images")
      .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
      .use("url-loader")
      .loader("url-loader")
      .options({
        limit: 4096,
        // name 代表 url-loader 会将资源写到 static/fonts/ 下
        name: 'static/img/[name].[hash:8].[ext]',
        // publicPath 代表资源引入 url 会生成 /live 的前缀，比方 /live/static/img/bg_header.790a94f4.png
        publicPath: process.env.NODE_ENV === 'production' ? '/live' : '',
      });

  }
}

假如主利用部署地址是 192.168.2.192，子利用的部署地址是 192.168.2.192:7102。

打包编译部署后，子利用的 css 文件外面的图片资源援用 url 如下：

/* static/css/app.e99e9aae.css */

background-header {background: url(/live/static/img/bg_header.790a94f4.png);
}

主利用加载子利用的时候，子利用的资源拼接主利用 domian 后，子利用的 css 文件外面的图片资源加载门路 url 就会变成：

192.168.2.192/live/static/img/bg_header.790a94f4.png

此时的要害就是要拜访到子利用的资源，而不是去主利用资源目录去找。

所以咱们采纳 nginx 门路代理转发端口的计划，当利用拜访 192.168.2.192/live 这个门路时，通过 nginx 进行门路代理转发配置，转发到子利用端口。

配置 nginx 代理规定：

# nginx.conf

http {
  server {
    listen    80;
    server_name 192.168.2.192;
  
    location /live {
      proxy_pass  127.0.0.1:7102

      try_files $uri $uri/ /index.html;
    }
  }
}

此时真正拜访的资源门路（子利用资源门路）是：

192.168.2.192:7102/static/img/bg_header.790a94f4.png

???? 至此，通过批改配置 url-loader 的 publicPath 以及配置 nginx 的门路代理转发，就能够实现编译打包一次，到处部署的目标。