Nuxt.js v2.12에서 v2.13/v2.14로의 버전 업그레이드 참고 사항

Nuxt.js v2.12에서 Nuxt.js v2.13, v2.14로 버전을 업그레이드 할 때의주의 사항
변했다고 느낀 것을 정리합니다.
각 버전의 주요 특징으로 v2.13에서는 정적 빌드가 향상되었습니다.
v2.14에서는 빌드 주위의 정리·고속화가 이루어졌습니다.

이 기사에서는 다음 버전에서 검증을 실시하고 있습니다.

Nuxt.js v2.13.3

Nuxt.js v2.14.6

Nuxt.js v2.13부터는 dotenv가 런타임 구성에 포함됩니다.

Nuxt.js v2.13부터 dotenv가 런타임 구성에 포함됩니다.
htps : //없는 xtjs. 오 rg / b ぉ g / 모 ぃ ん g f 로 m 없는 xtjs - 도 텐 v - 르 룬 치메 콘후 ぃ g

이 기능은 .env 파일을 플러그인 없이 자동으로 로드합니다.
다만, .env 라고 하는 디렉토리 부하에 development.js 등으로 환경 변수를 설정하고 있는 경우,
.env 디렉터리를 파일로 로드하려고 하면 오류가 발생합니다.
(여기서 빠졌습니다..)
이것을 해소하는 방법은, 단순하게 환경 변수를 포함하는 디렉토리를 .env로 하지 않으면 괜찮습니다.

환경 변수를 빌드 후 소스 코드에서 숨길 수 있습니다 (SSG 전용)

process.env 또는 nuxt.config.js의 env에 환경 변수를 작성한 경우,
webpeck로 컴파일하면 소스 코드에 남아있었습니다.



이것은 v2.12 또는 v2.13에서도 마찬가지입니다.

참고:
위의 https://nuxtjs.org/ 기사 및
Nuxt의 Jamstack 구성에서 API 키를 숨기는 방법 이해

v2.13부터 nuxt.config에 publicRuntimeConfig 및 privateRuntimeConfig라는 항목이 추가되었습니다.
privateRuntimeConfig는 SSG 일 때만 사용되며 프론트 소스에는 남아 있지 않습니다.

프런트에서 사용하는 환경 변수를 숨기고 싶을 때

이것으로 환경 변수를 숨길 수 있었던 것처럼 보입니다만, 검색 API 등 프런트에서는 환경 변수를 사용할 때는 privateRuntimeConfig 를 사용할 수 없습니다.
Algolia의 Application ID와 같이 보이는 문제는 서버측에서 처리를 끼워야 합니다.

참고: microCMS와 Nuxt로 미리보기 화면 만들기 _API-KEY를 숨기는 방법

generate가 v2.13이 아니고 v2.14에서 부활했습니다.

Nuxt v2.12에서는 정적 빌드 명령이

$ nuxt generate

하지만 v2.13부터

$ nuxt build && nuxt export 

로 바뀌었습니다.

그것이 v2.14에서는 다시

$ nuxt generate

에서 정적 빌드가 가능합니다.

v2.14에서 nuxt-property-decorator watchQuery를 사용할 수 없습니까?

이것은 제목 그대로입니다만, v2.13 에서 nuxt-property-decorator 의 watchQuery 로 쿼리 변경을 감시하고 있었습니다만, v2.14 의 static 빌드로 잘 동작하지 않게 되었습니다.

nuxt-property-decorator 버전은 2.8.8이며 Nuxt.js v2.14 이상 버전입니다.
해결 방법을 찾지 못했기 때문에 nuxt-property-decorator 대신
composition-api watch에서 쿼리를 모니터링하는 방법으로 해결되었습니다.

어쩌면 제대로 해소 방법이 있을지도 모른다 (혹은 watchQuery 대응에 관한 문서가 있을지도)입니다만,
찾아내지 못하고 이런 대응이 되었습니다.

요약

Nuxt.js의 v2.12는 오랫동안 안정된 기억이 있지만,
v2.14는 주변 플러그인 지원을 포함하여 지식 업데이트가 필요할 것입니다.

내용이 얇아서 죄송합니다