Vue中使用__webpack_public_path__动态设置publicPath

场景

在使用qiankun做微前端开发，子应用需要满足独立部署，又要能作为子应用被qiankun动态加载。

步骤

共需要:
修改两个文件：main.js和vue.config.js；
新增一个文件：public-path.js;

1. 创建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__
}

2. 在main.js里 最上边 引入public-path.js

//main.js
//必须最先引入
import './utils/public-path.js'
//其他内容
import Vue from 'vue'
//省略~

3. 在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是“私有”变量，后续会不会被改有一定的不确定性。