Nuxt/Vue-meta：info.meta.filter 不是函数答案

【问题标题】：Nuxt/Vue-meta: info.meta.filter is not a functionNuxt/Vue-meta：info.meta.filter 不是函数
【发布时间】：2020-04-11 01:07:45
【问题描述】：

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

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

我们怀疑这可能与我们 package.json 中最近的 Babel/Webpack 升级有关，因为我们收到的错误也提到了一些 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 已弃用 core-js@2.6.11：core-js@

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

【问题讨论】：

您是否正在推送和合并您的包锁定文件？
我认为那发生过一次，不小心。我们不应该推送这个文件吗？
您应该推送此文件，以便在编译代码的不同设置上始终具有相同的版本。

标签： webpack vuejs2 nuxt.js vue-meta

【解决方案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>

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

【讨论】：

为我解决了将 meta 从 dict 更改为 array

【解决方案2】：

可能有点晚了，不过如果有core-js的错误

yarn add --dev core-js@2 @babel/runtime-corejs2

npm install core-js@2 @babel/runtime-corejs2

可以帮忙

【讨论】：

【解决方案3】：

由于package-lock.json 文件，您现在已经解决了第一个问题。

第二个应该通过更新你的依赖来解决，如果它没有破坏任何东西，它可能是使用 core-js 的nuxt，所以你可以尝试将该依赖升级到最新的（2.11.0），否则它是如果您希望警告消失，只需逐个升级（这只是一个警告，因此您实际上可以暂时保留它）

【讨论】：