代码之家 › 专栏 › 技术社区 › Juneyoung Oh

与IE11兼容的nuxtjs问题\对象分配

babel-polyfill nuxt.js compatibility internet-explorer-11 vue.js

Juneyoung Oh · 技术社区 · 6 年前

我受到IE兼容性的影响。(我的Vue版本是3.1.0,Nuxt是2.3.4)

它总是出错 Object.assign . 这是我试过的清单。

Babel预设Vue应用程序( https://www.npmjs.com/package/babel-preset-vue-app )听说它不支持vue2.x。我按照 this post . 它在生成源时出错。
添加babel polyfill nuxt.config.js . 它没有错误,但我仍然在页面上得到了object.assign错误。
安装 babel/plugin-transform-object-assign . 它也不会在构建过程中产生任何错误,而是在页面中得到对象分配。

我有什么选择可以尝试支持IE11兼容性吗?

这是我的电流 .babelrc 和 NoX.CONT.JS .

巴贝尔

{
    "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 .

1 回复 | 直到 6 年前

Juneyoung Oh 6 年前

经过数小时的挣扎,我用不好的方法(在我看来)解决了这个问题。

我只是添加 object-assign polyfill js 对NJX.JS

module.exports = {

    ...

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

    ... 

};

但是我仍然想知道如何将babel polifill应用到nuxt项目中。