webpack - Nuxt/Vue-meta : info. meta.filter 不是函数

Question

我正在开发一个以通用模式运行 Nuxt 的网站。我们与另一位开发人员一起为此工作了几个月。我们使用 Git 在不同的分支上进行协作，然后在发布网站新版本时的某些时刻进行集成。

从昨天开始，我们遇到了一些我们无法正确解释的事情。每当我尝试运行 nuxt , nuxt generate , npm install <package-name>应用程序崩溃并出现相同的错误:



我们怀疑这可能与最近的 有关。 Babel/Webpack 在我们的 package.json 中升级，因为我们得到的错误也提到了一些 core-js错误。所有这一切的奇怪之处在于，当我们恢复到旧提交时，应用程序仍然会因完全相同的错误而崩溃。只有在我们在本地删除存储库并再次克隆它并使用 npm install 安装我们所有的依赖项之后，我们能够恢复到相同的提交并使网站重新启动并运行。

来自我们 package.json 的一些其他信息:

"scripts": {
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "dev": "HOST=0.0.0.0 nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "gsap": "^3.0.1",
    "nuxt": "^2.10.2",
    "swiper": "^5.2.1",
    "vue-svg-loader": "^0.12.0"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^1.1.2",
    "@nuxtjs/eslint-module": "^0.2.1",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.15.1",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-nuxt": "^0.5.0",
    "eslint-plugin-prettier": "^3.1.1",
    "node-sass": "^4.13.0",
    "nodemon": "^1.19.4",
    "prettier": "^1.19.1",
    "sass-loader": "^7.3.1"
  },
  "config": {
    "nuxt": {
      "host": "188.166.41.47",
      "port": "3000"
    }
  }

删除后 package-lock.json , node_modules文件夹和 .nuxt我们尝试运行的文件夹 npm install再次。这导致安装成功，尽管有一个错误:

npm WARN deprecated core-js@2.6.11: core-js@<3 不再维护，由于问题数量不推荐使用。请将您的依赖项升级到 core-js@3 的实际版本。

然而，这不是我们在 package.json 中明确注册的内容。

Answer 1

修复 - 将元更改为对象数组。看下面的解释。

我自己也遇到过这个问题，我找到了一个简单的解决方法。 filter() 是数组构造函数的内置方法。这意味着我们调用该方法的对象不是数组。

我的代码如下所示:

<template>
    <div>
        <div>                    
            <h1>Events</h1>          
        </div>
    </div>
</template>

<script>
export default {
    head(){
        return {
            title: 'Sergiu Mare - Home page',
            meta: {
                hid: 'description',
                name: 'description',
                content: 'All the information that are about the freelancer Sergiu Mare.'
            }
        }
    }
}
</script>

我把它改成

<template>
    <div>
        <div>                    
            <h1>Events</h1>          
        </div>
    </div>
</template>

<script>
export default {
    head(){
        return {
            title: 'Sergiu MAre - Home page',
            meta: [
                {hid: 'description'},
                {name: 'description'},
                {content: 'All the information that are about the freelancer Sergiu Mare.'}
            ]
        }
    }
}
</script>

现在，如果我检查页面，元信息就在那里。