微前端 qiankun webpack打包后静态资源路径404问题解决
首先出现静态资源加载失败的原因是路径问题,子应用的路径被父应用影响,解决方法你需要将你的 webpack publicPath 配置设置成一个绝对地址的 url{output: {publicPath: `//localhost:${port}`,}}借助 webpack 的 url-loader 将字体文件和图片打包,小文件转 base64 ,大文件注入路径前缀vue cli2写法const p
·
首先出现静态资源加载失败的原因是路径问题,
子应用的路径被父应用影响,解决方法
你需要将你的 webpack publicPath 配置设置成一个绝对地址的 url
{
output: {
publicPath: `//localhost:${port}`,
}
}
借助 webpack 的 url-loader 将字体文件和图片打包,小文件转 base64 ,大文件注入路径前缀
vue cli2写法
const publicPath = process.env.NODE_ENV === "production" ? 'https://qiankun.umijs.org/' : `http://localhost:${port}`;
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|webp)$/i,
use: [
{
loader: 'url-loader',
options: {},
fallback: {
loader: 'file-loader',
options: {
name: 'img/[name].[hash:8].[ext]',
publicPath
}
}
},
],
},
{
test: /\.(woff2?|eot|ttf|otf)$/i,
use: [
{
loader: 'url-loader',
options: {},
fallback: {
loader: 'file-loader',
options: {
name: 'fonts/[name].[hash:8].[ext]',
publicPath
}
}
},
],
},
],
},
};
vue cli3写法
const publicPath = process.env.NODE_ENV === "production" ? 'https://qiankun.umijs.org/' : `http://localhost:${port}`;
module.exports = {
chainWebpack: (config) => {
config.module.rule('fonts')
.use('url-loader')
.loader('url-loader')
.options({
limit: 4096, // 小于4kb将会被打包成 base64
fallback: {
loader: 'file-loader',
options: {
name: 'fonts/[name].[hash:8].[ext]',
publicPath
}
}
})
.end();
config.module.rule('images')
.use('url-loader')
.loader('url-loader')
.options({
limit: 4096, // 小于4kb将会被打包成 base64
fallback: {
loader: 'file-loader',
options: {
name: 'img/[name].[hash:8].[ext]',
publicPath
}
}
})
},
}
qiankun官网
qiankun
官网常见问题里面包含常见的问题
更多推荐
已为社区贡献5条内容
所有评论(0)