nuxt.js의 Full Static Generation에서 개발

Full Static Generation이란?

공식 블로그
htps : //없는 xtjs. 오 rg / b ぉ g / goin g fu ls 들 c

・버전 2.14부터 사용할 수 있는 기능입니다.
버전 업데이트는
　①package.json의 nuxt 버전을 2.14 이상으로 설정
② yarn.lock과 node.modules 파일을 삭제
③yarn install을 실행한다
로 할 수 있습니다.

・완전히 정적인 사이트를 작성하기 위해, 페이지 천이시의 API 통신도 발생하지 않는다(=API 서버가 떨어져도 움직인다)

· 페이지 전환이 빠릅니다.

즉시 설정

package.json 내에서 아래와 같이 실행 내용을 씁니다.

package.json

  "scripts": {
    "dev": "nuxt",
    "generate": "nuxt generate",
    "start": "nuxt start",
  }

nuxt.config.js에 정적 설정

nuxt.config.js

export default {
  target: "static",
}

개발하는 동안 "dev": "nuxt" 실행

command

yarn dev

개발이 완료되면 "generate": "nuxt generate"를 실행하여 정적 파일을 만듭니다.

command

yarn generate

실행하면 dist 폴더가 생성됩니다.

본래라면 별도 HTTP 서버를 두고 호스팅할 필요가 있었지만,

"start": "nuxt start"를 실행하면 로컬 환경에서 그대로 실행하여 확인할 수 있습니다.

command

yarn start

실행하면 아래와 같이 서버 측에서 렌더링 해줍니다.

http-server등의 라이브러리 등 사용하지 않아도 확인할 수 있어 편리했습니다.