nuxtjs 问题与 IE11 compatibility_ object assign

Question

IE兼容性让我很苦恼。（我的vue版本是3.1.0，nuxt是2.3.4）

Object.assign 保持错误。这是我尝试过的列表。

babel-preset-vue-app(https://www.npmjs.com/package/babel-preset-vue-app). Heard that it does not support vue2.X. I followed the description on this post。构建源时出错。
在 nuxt.config.js 中添加 babel-polyfill。它没有错误，但页面上仍然出现 Object.assign 错误。
安装babel/plugin-transform-object-assign。它在构建过程中也没有出错，但是在页面中得到了对象分配的东西。

是否有任何选项可以让我尝试提高 IE11 兼容性？

这是我当前的 .babelrc 和 nuxt.config.js。

.babelrc

{
    "presets": [
        [
            "env",
            {
                "modules": false
            }
        ],
        [ "vue-app",
            {
                "useBuiltIns": true,
                "targets": {
                    "ie": 9,
                    "uglify": true
                }
            }
        ]
    ],
    "plugins": [
        "@babel/plugin-transform-object-assign",
        "transform-vue-jsx",
        [
            "module-resolver",
            {
                "root": [
                    "./src"
                ],
                "alias": {
                    "~sbdc": "./src/sbdc"
                }
            }
        ]
    ]
}

nuxt.config.js

中的构建选项

build: {
    babel: {
        presets: [
            ['vue-app', {
                useBuiltIns: true,
                targets: { ie: 9, uglify: true }
            }
            ]
        ]
    },
    optimization: {
        splitChunks: {
            chunks: 'all',                  
            maxInitialRequests: Infinity,       
            minSize: 0,                     
            cacheGroups: {              
              vendor: {
                  test: /[\/]node_modules[\/](babel-polyfill|moment|lodash|axios|get-size|jquery|js-cookie|jwt-decode|numeral|vuetify)[\/]/,
                  name: 'utilityVendor'
                }
            }
        }
    },
    output: {
        publicPath: serviceConfig.pwa_publicPath || false
    },
    extractCSS: true,
    plugins: [
        new webpack.ProvidePlugin( {
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
        } )
    ]
}

感谢您分享解决方案！

======= 编辑于 0114 =============

Etra 信息#1。当我在ie11浏览器上查看错误时，它会自动转换如下代码

return {layout:"popup",data:[{resultBody:Object.assign(Object.create(null), ... sorry, sensitive data

而原始代码是...

asyncData: async function ({req}) {
    return {
        resultBody: req.body,
    };
},

req.body 受 body-parser 支持。

Answer 1

经过几个小时的努力，我用不好的方法解决了这个问题（在我看来）。

我只是将 object-assign polyfill js 添加到 nuxt.js

module.exports = {

    ...

    head: {
        script: [ { src: '/js/object-assign.js' } ]
    },

    ... 

};

但是我还是想知道在nuxt项目中应用babel-polyfill的正确方法

nuxtjs 问题与 IE11 compatibility_ object assign

nuxtjs issue with IE11 compatibility_ object assign

compatibility

internet-explorer-11

vue.js

babel-polyfill

nuxt.js