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