[英]nuxtjs issue with IE11 compatibility_ object assign
I am suffered by IE compatibility. IE兼容性使我受苦。 (my vue version is 3.1.0, nuxt is 2.3.4)
(我的vue版本是3.1.0,nuxt是2.3.4)
It keeps error with Object.assign
. 它使
Object.assign
保持错误。 Here is the list what I have tried. 这是我尝试过的清单。
babel-preset-vue-app( https://www.npmjs.com/package/babel-preset-vue-app ). babel-preset-vue-app( https://www.npmjs.com/package/babel-preset-vue-app )。 Heard that it does not support vue2.X.
听说它不支持vue2.X。 I followed the description on this post .
我按照这篇文章的描述。 It gets an error while building source.
构建源代码时出错。
Adding babel-polyfill in nuxt.config.js
. 在
nuxt.config.js
添加babel- nuxt.config.js
。 It does not error, but still I got Object.assign error on the page. 它没有错误,但是在页面上仍然出现Object.assign错误。
Install babel/plugin-transform-object-assign
. 安装
babel/plugin-transform-object-assign
。 It also does not make any error in build process, but got Object assign thing in the page. 它也不会在构建过程中犯任何错误,但是在页面中有对象分配的东西。
Is there any option I can try to feet IE11 compatibility? 有什么我可以尝试兼容IE11的选项吗?
Here is my current .babelrc
and nuxt.config.js
. 这是我当前的
.babelrc
和nuxt.config.js
。
.babelrc .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"
}
}
]
]
}
build option in nuxt.config.js 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',
} )
]
}
Thanks for sharing you solutions! 感谢您分享解决方案!
======= Edited in 0114 ============= =======编辑于0114 ============
Etra information #1. Etra信息#1。 When I look at the error on ie11 browser, it automatically transform code like below
当我在ie11浏览器上查看错误时,它将自动转换如下代码
return {layout:"popup",data:[{resultBody:Object.assign(Object.create(null), ... sorry, sensitive data
while the original code is... 而原始代码是...
asyncData: async function ({req}) {
return {
resultBody: req.body,
};
},
req.body
is supported by body-parser
. req.body
由body-parser
支持。
After hours of struggling, I solved this with not good way(In my thought). 经过数小时的奋斗,我用不好的方法解决了这个问题(在我的想法中)。
I just add object-assign polyfill js to nuxt.js 我只是将对象分配 polyfill js添加到nuxt.js
module.exports = {
...
head: {
script: [ { src: '/js/object-assign.js' } ]
},
...
};
But I still want to know the proper way to apply babel-polyfill into nuxt project. 但是我仍然想知道将babel-polyfill应用于nuxt项目的正确方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.