vue兼容谷歌48(含qiankun兼容)

shidouyu

已于 2022-04-26 11:55:08 修改

阅读量2.6k

点赞数

分类专栏： Vue js css 文章标签： vue.js 前端 javascript

于 2022-04-26 09:17:51 首次发布

本文链接：https://blog.csdn.net/shidouyu/article/details/124419833

版权

Vue 同时被 3 个专栏收录

36 篇文章

订阅专栏

20 篇文章

订阅专栏

css

4 篇文章

订阅专栏

本文介绍了如何在Vue项目中处理兼容性问题，包括在vue.config.js中配置es6转es5，解决css3变量的浏览器兼容，处理乾坤框架在老版本谷歌浏览器中的问题，以及解决qiankun微前端在谷歌48版本的加载错误。主要涉及了babel-polyfill、css-vars-ponyfill、whatwg-fetch等相关库的引入和配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

控制台定位到相应插件的js，找到插件：

1,在vue.config.js中配置：


'transpileDependencies': ['@jiaminghi/*',],

transpileDependencies为特别需要将es6代码翻译成es5的插件说明；

2,css3的var兼容：

npm install css-vars-ponyfill mutationobserver-shim —save


import 'mutationobserver-shim'
import cssVars from 'css-vars-ponyfill'
cssVars({
watch: true
})

3，乾坤兼容谷歌老版本，main.js中配置：（注意：子应用不能使用babel-polyfill）

npm install whatwg-fetch custom-event-polyfill core-js

import 'whatwg-fetch';

import 'custom-event-polyfill';

import 'core-js/stable/promise';

import 'core-js/stable/symbol';

import 'core-js/stable/string/starts-with';

import 'core-js/web/url';

4，qiankun兼容谷歌48版本，出现“

`Application died in status LOADING_SOURCE_CODE: You need to export the functional lifecycles in xxx entry`

”

解决： webpack output.library 配置成跟主应用中注册的 name 字段一致，如：

// 主应用中注册子应用
registerMicroApps([
  {
    name: 'brokenSubApp',
    entry: '//localhost:7100',
    container: '#yourContainer',
    activeRule: '/react',
  },
]);
//将微应用的 output.library 改为跟主应用中注册的一致：
module.exports = {
  output: {
    // 这里改成跟主应用中注册的一致
    library: 'brokenSubApp',
    libraryTarget: 'umd',
    jsonpFunction: `webpackJsonp_${packageName}`,
  },
};