Nuxt/Vue-meta: info.meta.filter는 함수가 아닙니다.

Nuxt/Vue-meta: info.meta.filter는 함수가 아닙니다.

유니버설 모드로 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이 결과, 1개의 에러가 발생했지만, 인스톨에 성공했습니다.

npm WARN은 core-js@2.6.11을 권장하지 않습니다.core-js@< 3은 유지보수가 종료되었으며 문제 수 때문에 사용을 권장하지 않습니다.종속성을 실제 버전의 core-js@3으로 업그레이드하십시오.

그러나 이는 당사의 패키지에 명시적으로 등록되어 있지 않습니다.json..

수정 - 메타를 개체 배열로 변경합니다.아래의 설명을 참조하십시오.

저도 이 문제를 겪었는데 쉬운 수정을 찾았습니다.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>

페이지를 조사하면 메타 정보가 있습니다.

이제 첫 번째 이슈를 극복하셨으니까package-lock.json파일.

두 번째 문제는 종속성을 업데이트하여 해결해야 합니다. 종속성이 손상되지 않을 경우 다음과 같은 문제가 발생할 수 있습니다.nuxt코어 패밀리를 사용하고 있기 때문에 의존관계를 최신(2.11.0)으로 업그레이드해 볼 수 있습니다.그렇지 않으면 경고를 없애려면 하나씩 업그레이드합니다(경고일 뿐이므로 실제로는 현재로선 그대로 둘 수 있습니다).

좀 늦긴 했지만, 만약 코어 제이 에러들이

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

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

도움이 될 수 있다

가장 높은 평가를 받은 정답은 올바른 트랙에 있지만 정답은 아닙니다.그것은 이와 같은 물건들의 배열로 쓰여져야 한다.

<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>

그리고 의사로부터

컴포넌트에 때 하기 아이덴티티와 해 주세요.hid를를누누누누다다입니다.vue-meta는 기본 태그를 덮어쓸 필요가 있음을 알 수 있습니다.

출처 : https://nuxtjs.org/docs/features/meta-tags-seo/

언급URL : https://stackoverflow.com/questions/59392717/nuxt-vue-meta-info-meta-filter-is-not-a-function