个别状况下，咱们对利用进行配置打包，要对图片字体等资源进行上面配置，使得资源门路失常加载。然而，在微前端模式下，子利用打包部署后，往往会呈现子利用 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.confhttp { 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 的门路代理转发，就能够实现编译打包一次，到处部署的目标。