IE Dev 和 Build 使用 nuxt JS 失败，因为对象不支持 属性 或方法或无法设置未定义或空引用的 属性 'overflow'
IE Dev and Build Fails with nuxt JS as Object doesn't support property or method or Unable to set property 'overflow' of undefined or null reference
如果您了解我的 nuxt 应用程序在 Internet Explorer 上失败的原因，请告诉我。
在我的代码部分，我使用了 array.includes() ，我意识到它不受 IE 支持并被删除但仍然无法正常工作。我确实使用了 IE11
应该支持的 forEach 循环
控制台错误：
[Vuetify] [UPGRADE] 'v-content' is deprecated, use 'v-main' instead.
found in
---> <VMain>
<VApp>
<Layouts/default.vue> at layouts/default.vue
<Root>
TypeError: Unable to set property 'overflow' of undefined or null reference
{
[functions]: ,
__proto__: { },
description: "Unable to set property 'overflow' of undefined or null reference",
message: "Unable to set property 'overflow' of undefined or null reference",
name: "TypeError",
number: -2146823281,
stack: "TypeError: Unable to set property 'overflow' of undefined or null reference
at setProp (eval code:7154:7)
at updateStyle (eval code:7215:7)
at invokeCreateHooks (eval code:6059:7)
at createElm (eval code:5946:11)
at createChildren (eval code:6043:9)
at createElm (eval code:5944:9)
at createChildren (eval code:6043:9)
at createElm (eval code:5944:9)
at createChildren (eval code:6043:9)
at createElm (eval code:5944:9)",
Symbol(Lang fallback)_i.cu2qu2ppg6q: undefined,
Symbol(react.element)_h.cu2qu2ppg6q: undefined
}
TypeError: Object doesn't support property or method 'values'
{
[functions]: ,
__proto__: { },
description: "Object doesn't support property or method 'values'",
message: "Object doesn't support property or method 'values'",
name: "TypeError",
number: -2146827850,
stack: "TypeError: Object doesn't support property or method 'values'
at Application.prototype.update (eval code:40041:5)
at Application.prototype.register (eval code:40031:5)
at callUpdate (eval code:36617:9)
at created (eval code:36603:7)
at invokeWithErrorHandling (eval code:1853:5)
at callHook (eval code:4213:7)
at Vue.prototype._init (eval code:4998:5)
at VueComponent (eval code:5144:7)
at createComponentInstanceForVnode (eval code:3280:3)
at init (eval code:3111:7)",
Symbol(Lang fallback)_i.cu2qu2ppg6q: undefined,
Symbol(react.element)_h.cu2qu2ppg6q: undefined
}
TypeError: Unable to get property 'parentNode' of undefined or null reference
{
[functions]: ,
__proto__: { },
description: "Unable to get property 'parentNode' of undefined or null reference",
message: "Unable to get property 'parentNode' of undefined or null reference",
name: "TypeError",
number: -2146823281,
stack: "TypeError: Unable to get property 'parentNode' of undefined or null reference
at parentNode (eval code:5711:3)
at patch (eval code:6503:9)
at Vue.prototype._update (eval code:3942:7)
at updateComponent (eval code:4054:7)
at get (eval code:4473:5)
at run (eval code:4548:5)
at flushSchedulerQueue (eval code:4304:5)
at Anonymous function (eval code:1979:9)
at flushCallbacks (eval code:1905:5)
at run (eval code:75:13)",
Symbol(Lang fallback)_i.cu2qu2ppg6q: undefined,
Symbol(react.element)_h.cu2qu2ppg6q: undefined
}
Nuxt 配置：
export default {
env: {
},
mode: 'spa',
/*
** Headers of the page
*/
router: {
trailingSlash: undefined, scrollBehavior: function (to, from, savedPosition) {
return { x: 0, y: 0 }
}
},
redirect: [
{
// eslint-disable-next-line
from: '(?!^\/$|^\/[?].*$)(.*\/[?](.*)$|.*\/$)',
to: (from, req) => {
const base = req._parsedUrl.pathname.replace(/\/$/, '');
const search = req._parsedUrl.search;
return base + (search != null ? search : '');
}
},
],
head: {
titleTemplate: '%s - ' + process.env.npm_package_name,
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{
rel: "stylesheet",
href:
"https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
},
{
rel: "stylesheet",
href:
"https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css"
},
{
rel: "stylesheet",
href:
"https://use.fontawesome.com/releases/v5.0.13/css/all.css"
},
{
rel: "stylesheet",
href:
"https://cdn.jsdelivr.net/npm/font-awesome@4.x/css/font-awesome.min.css"
},
{
rel: "stylesheet",
href:
"https://fonts.googleapis.com/css?family=Architects+Daughter|PT+Serif&display=swap"
},
{
rel: "stylesheet",
href:
"https://fonts.googleapis.com/css?family=Material+Icons"
},
{
rel: "stylesheet",
href:
"https://fonts.googleapis.com/css?family=Noto+Serif:400i&display=swap"
},
{
rel: "stylesheet",
href:
"https://cdn.quilljs.com/1.3.6/quill.snow.css"
}
], script: [
{ src: 'https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=es5%2Ces6%2Ces7%2CArray.prototype.forEach%2CArray.prototype.includes%2CArray.prototype.values%2CString.prototype.includes' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: ['~/assets/global.css'
],
/*
** Plugins to load before mounting the App
*/
plugins: [
{ src: '~/plugins/vue-json-viewer.js', mode: 'client' }, { src: '~/plugins/vueditor.js', mode: 'client' }
],
/*
** Nuxt.js dev-modules
*/
buildModules: [
'@nuxtjs/vuetify',
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios', 'vue-scrollto/nuxt',
'@nuxtjs/redirect-module','vue-scrollto/nuxt',
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
},
/*
** vuetify module configuration
** https://github.com/nuxt-community/vuetify-module
*/
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: false,
}
},
/*
** Build configuration
*/
build: {
extend(config, ctx) {
}
}
}
Package.json:
{
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"@nuxtjs/axios": "^5.3.6",
"@nuxtjs/redirect-module": "^0.3.1",
"nuxt": "^2.12.2",
"vue-json-viewer": "^2.2.11",
"vue-quill-editor": "^3.0.6",
"vue-scrollto": "^2.18.1",
"vuetify-loader": "^1.5.0"
},
"devDependencies": {
"@nuxtjs/vuetify": "^1.0.0"
},
"resolutions": {
"@nuxt/**/terser": "3.14.1"
}
}
IE 不支持 forEach HTMLCollection。
您可以在脚本中添加以下 polyfill 到 polyfill forEach 然后它可以用于 IE 中的 NodeList 和 HTMLCollection:
//polyfill
var ctors = [typeof NodeList !== "undefined" && NodeList, typeof HTMLCollection !== "undefined" && HTMLCollection];
for (var n = 0; n < ctors.length; ++n) {
var ctor = ctors[n];
if (ctor && ctor.prototype && !ctor.prototype.forEach) {
// (Yes, there's really no need for `Object.defineProperty` when doing the `forEach`)
ctor.prototype.forEach = Array.prototype.forEach;
if (typeof Symbol !== "undefined" && Symbol.iterator && !ctor.prototype[Symbol.iterator]) {
Object.defineProperty(ctor.prototype, Symbol.iterator, {
value: Array.prototype[Symbol.itereator],
writable: true,
configurable: true
});
}
}
}
--更新
也许这会在将来对某人有所帮助，但是如果您有任何无法在 IE11 和 NUXTJS 中使用 ES5/6/7 的 polyfill 问题：
转到 polyfill。io/v3/url-builder
然后 select 你需要的功能，得到 link 并以这种格式把它放在 nuxt.config.js 中：
head:{
script: [
{ src: 'https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=es5%2Ces6%2Ces7%2CArray.prototype.forEach%2CArray.prototype.includes%2CArray.prototype.values%2CString.prototype.includes' }
]}
我的问题是：无法设置未定义或空引用的 属性 'overflow'
追溯到一个 SVG 文件和 foreignObject 标签。
如果您了解我的 nuxt 应用程序在 Internet Explorer 上失败的原因，请告诉我。 在我的代码部分，我使用了 array.includes() ，我意识到它不受 IE 支持并被删除但仍然无法正常工作。我确实使用了 IE11
应该支持的 forEach 循环控制台错误：
[Vuetify] [UPGRADE] 'v-content' is deprecated, use 'v-main' instead.
found in
---> <VMain>
<VApp>
<Layouts/default.vue> at layouts/default.vue
<Root>
TypeError: Unable to set property 'overflow' of undefined or null reference
{
[functions]: ,
__proto__: { },
description: "Unable to set property 'overflow' of undefined or null reference",
message: "Unable to set property 'overflow' of undefined or null reference",
name: "TypeError",
number: -2146823281,
stack: "TypeError: Unable to set property 'overflow' of undefined or null reference
at setProp (eval code:7154:7)
at updateStyle (eval code:7215:7)
at invokeCreateHooks (eval code:6059:7)
at createElm (eval code:5946:11)
at createChildren (eval code:6043:9)
at createElm (eval code:5944:9)
at createChildren (eval code:6043:9)
at createElm (eval code:5944:9)
at createChildren (eval code:6043:9)
at createElm (eval code:5944:9)",
Symbol(Lang fallback)_i.cu2qu2ppg6q: undefined,
Symbol(react.element)_h.cu2qu2ppg6q: undefined
}
TypeError: Object doesn't support property or method 'values'
{
[functions]: ,
__proto__: { },
description: "Object doesn't support property or method 'values'",
message: "Object doesn't support property or method 'values'",
name: "TypeError",
number: -2146827850,
stack: "TypeError: Object doesn't support property or method 'values'
at Application.prototype.update (eval code:40041:5)
at Application.prototype.register (eval code:40031:5)
at callUpdate (eval code:36617:9)
at created (eval code:36603:7)
at invokeWithErrorHandling (eval code:1853:5)
at callHook (eval code:4213:7)
at Vue.prototype._init (eval code:4998:5)
at VueComponent (eval code:5144:7)
at createComponentInstanceForVnode (eval code:3280:3)
at init (eval code:3111:7)",
Symbol(Lang fallback)_i.cu2qu2ppg6q: undefined,
Symbol(react.element)_h.cu2qu2ppg6q: undefined
}
TypeError: Unable to get property 'parentNode' of undefined or null reference
{
[functions]: ,
__proto__: { },
description: "Unable to get property 'parentNode' of undefined or null reference",
message: "Unable to get property 'parentNode' of undefined or null reference",
name: "TypeError",
number: -2146823281,
stack: "TypeError: Unable to get property 'parentNode' of undefined or null reference
at parentNode (eval code:5711:3)
at patch (eval code:6503:9)
at Vue.prototype._update (eval code:3942:7)
at updateComponent (eval code:4054:7)
at get (eval code:4473:5)
at run (eval code:4548:5)
at flushSchedulerQueue (eval code:4304:5)
at Anonymous function (eval code:1979:9)
at flushCallbacks (eval code:1905:5)
at run (eval code:75:13)",
Symbol(Lang fallback)_i.cu2qu2ppg6q: undefined,
Symbol(react.element)_h.cu2qu2ppg6q: undefined
}
Nuxt 配置：
export default {
env: {
},
mode: 'spa',
/*
** Headers of the page
*/
router: {
trailingSlash: undefined, scrollBehavior: function (to, from, savedPosition) {
return { x: 0, y: 0 }
}
},
redirect: [
{
// eslint-disable-next-line
from: '(?!^\/$|^\/[?].*$)(.*\/[?](.*)$|.*\/$)',
to: (from, req) => {
const base = req._parsedUrl.pathname.replace(/\/$/, '');
const search = req._parsedUrl.search;
return base + (search != null ? search : '');
}
},
],
head: {
titleTemplate: '%s - ' + process.env.npm_package_name,
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{
rel: "stylesheet",
href:
"https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
},
{
rel: "stylesheet",
href:
"https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css"
},
{
rel: "stylesheet",
href:
"https://use.fontawesome.com/releases/v5.0.13/css/all.css"
},
{
rel: "stylesheet",
href:
"https://cdn.jsdelivr.net/npm/font-awesome@4.x/css/font-awesome.min.css"
},
{
rel: "stylesheet",
href:
"https://fonts.googleapis.com/css?family=Architects+Daughter|PT+Serif&display=swap"
},
{
rel: "stylesheet",
href:
"https://fonts.googleapis.com/css?family=Material+Icons"
},
{
rel: "stylesheet",
href:
"https://fonts.googleapis.com/css?family=Noto+Serif:400i&display=swap"
},
{
rel: "stylesheet",
href:
"https://cdn.quilljs.com/1.3.6/quill.snow.css"
}
], script: [
{ src: 'https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=es5%2Ces6%2Ces7%2CArray.prototype.forEach%2CArray.prototype.includes%2CArray.prototype.values%2CString.prototype.includes' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: ['~/assets/global.css'
],
/*
** Plugins to load before mounting the App
*/
plugins: [
{ src: '~/plugins/vue-json-viewer.js', mode: 'client' }, { src: '~/plugins/vueditor.js', mode: 'client' }
],
/*
** Nuxt.js dev-modules
*/
buildModules: [
'@nuxtjs/vuetify',
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios', 'vue-scrollto/nuxt',
'@nuxtjs/redirect-module','vue-scrollto/nuxt',
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
},
/*
** vuetify module configuration
** https://github.com/nuxt-community/vuetify-module
*/
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: false,
}
},
/*
** Build configuration
*/
build: {
extend(config, ctx) {
}
}
}
Package.json:
{
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"@nuxtjs/axios": "^5.3.6",
"@nuxtjs/redirect-module": "^0.3.1",
"nuxt": "^2.12.2",
"vue-json-viewer": "^2.2.11",
"vue-quill-editor": "^3.0.6",
"vue-scrollto": "^2.18.1",
"vuetify-loader": "^1.5.0"
},
"devDependencies": {
"@nuxtjs/vuetify": "^1.0.0"
},
"resolutions": {
"@nuxt/**/terser": "3.14.1"
}
}
IE 不支持 forEach HTMLCollection。
您可以在脚本中添加以下 polyfill 到 polyfill forEach 然后它可以用于 IE 中的 NodeList 和 HTMLCollection:
//polyfill
var ctors = [typeof NodeList !== "undefined" && NodeList, typeof HTMLCollection !== "undefined" && HTMLCollection];
for (var n = 0; n < ctors.length; ++n) {
var ctor = ctors[n];
if (ctor && ctor.prototype && !ctor.prototype.forEach) {
// (Yes, there's really no need for `Object.defineProperty` when doing the `forEach`)
ctor.prototype.forEach = Array.prototype.forEach;
if (typeof Symbol !== "undefined" && Symbol.iterator && !ctor.prototype[Symbol.iterator]) {
Object.defineProperty(ctor.prototype, Symbol.iterator, {
value: Array.prototype[Symbol.itereator],
writable: true,
configurable: true
});
}
}
}
--更新 也许这会在将来对某人有所帮助，但是如果您有任何无法在 IE11 和 NUXTJS 中使用 ES5/6/7 的 polyfill 问题：
转到 polyfill。io/v3/url-builder 然后 select 你需要的功能，得到 link 并以这种格式把它放在 nuxt.config.js 中：
head:{
script: [
{ src: 'https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=es5%2Ces6%2Ces7%2CArray.prototype.forEach%2CArray.prototype.includes%2CArray.prototype.values%2CString.prototype.includes' }
]}
我的问题是：无法设置未定义或空引用的 属性 'overflow' 追溯到一个 SVG 文件和 foreignObject 标签。