场景
在使用qiankun做微前端开发，子应用需要满足独立部署，又要能作为子应用被qiankun动态加载。
步骤
共需要:
修改两个文件：main.js和vue.config.js；
新增一个文件：public-path.js;
- 创建
public-path.js,内容：
- 通用
//public-path.js
// eslint-disable-next-line no-undef
__webpack_public_path__ = window.__GW_ENV__.PUBLIC_PATH
- 添加
qiankun判断
//public-path.js
if (window.__POWERED_BY_QIANKUN__) {
// eslint-disable-next-line no-undef
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}
- 在main.js里 最上边 引入public-path.js
//main.js
//必须最先引入
import './utils/public-path.js'
//其他内容
import Vue from 'vue'
//省略~
- 在vue.config.js修改字体文件打包方式
//vue.config.js
//字体文件处理（解决使用动态publicPath-__webpack_public_path__,开发环境会出现路径找不到的问题）
chainWebpack(config) {
config.module
.rule("fonts")
.test(/.(ttf|otf|eot|woff|woff2)$/)
.use("url-loader")
.loader("url-loader")
.tap(options => {
options = {
// limit: 10000,
name: '/static/fonts/[name].[ext]'
}
return options
})
.end()
}
一点提醒
假如只是为了使用Jenkins等持续集成工具打出来的docker包可以在主域名或子域名下部署，只需要使用 相对 路径引用资源就行，不需要使用__webpack_public_path__,__webpack_public_path__是需要在nginx启动后动态改publicPath才用的。
写到最后
从名字看，__webpack_public_path__是一个webpack是“私有”变量，后续会不会被改有一定的不确定性。
