Vue中使用__webpack_public_path__动态设置publicPath

场景

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

步骤

共需要:
修改两个文件:main.jsvue.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__
}

  1. main.js最上边 引入public-path.js
//main.js
//必须最先引入
import './utils/public-path.js'
//其他内容
import Vue from 'vue'
//省略~
  1. 在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是“私有”变量,后续会不会被改有一定的不确定性。

你可能感兴趣的:(Vue中使用__webpack_public_path__动态设置publicPath)