Vue微前端乾坤(qiankun)解决子应用静态资源加载问题

安装file-loader:npm install file-loader
在子应用vue.config.js中进行配置,

//定义静态路由地址,根据子应用项目静态资源地址自行配置,打包后会根据publicPath对图片路径进行拼接
const publicPath = 'http://localhost:8081';

chainWebpack: (config) => {
    config.module
      .rule('fonts')
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 4096, // 小于4kb将会被打包成 base64
        fallback: {
          loader: 'file-loader',
          options: {
            esModule:false,
            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: {
            esModule:false,
            name: 'img/[name].[hash:8].[ext]',
            publicPath,
          },
        },
      });
 }

你可能感兴趣的:(前端,vue.js)