Vue-Nuxt:생성된 HTML이 올바르게 표시되지 않는 이유는 무엇입니까?

Vue-Nuxt:생성된 HTML이 올바르게 표시되지 않는 이유는 무엇입니까?

그래서 타이핑할 때npm run generateNuxt는 내 프로젝트를 생성한다.dist폴더입니다.그 폴더에서는, 라고 하는 폴더를 찾을 수 있습니다._nuxt내가 가지고 있는 곳.js파일 및index.html파일을 브라우저로 열어도 아무것도 표시되지 않습니다.

그래서 제 질문은 이것들 정적 파일 아닌가요?

제공된 CDN을 사용하여 작업하는 경우 vue.js당신은 가지고 있다html파일을 클릭하면 브라우저에 모든 것이 표시됩니다..html파일은 정적이므로 내부 로컬 호스트 서버가 필요하지 않습니다.왜 그렇게 하지 않지? 또는 생성된 파일을 어떻게 볼 수 있습니까?

@aljazerzen이 설명했듯이 Vue, js는 그렇지 않습니다.SSR즉석에서, 목적의 하나Nuxt.js는 SSR를 제공하는 것으로, 웹 사이트의 정적 버전을 생성할 수도 있습니다.네가 원하는 걸 내가 맞힌다면, 네가 원하는 건 네가 원하는 걸 열었을 때index.html(Nuxt.js가 생성하는 것) 기능하는 웹 페이지를 볼 수 있습니다.웹 사이트에 접속할 때file:///url, 당신의 브라우저(적어도 Chrome에서 그런 일이 일어나는 것을 본 적이 있다)는 로딩되지 않습니다..js파일을 표시합니다.

저는 Nuxt에서 생성된 웹사이트를 수중에 가지고 있지 않기 때문에 왜 이런 일이 일어나는지 정확히 말씀드릴 수 없습니다.하지만 제 추측으로는 Nuxt가 이 파일들을 생성하면src로서 접근할 수 없는file:///, 아마도 ...로서./your_js.js로딩하려고 할 때, 그게 바로/웹 사이트의 루트를 기준으로 하지 않고 루트 폴더)를 표시합니다)./).

이 문제의 해결책은 임의의 웹 서버를 사용하여 자산을 처리하는 것입니다.Nuxt.js 문서에 따르면:

nuxt generate :Build the application and generate every route as a HTML file (used for static hosting).

간단한 테스트를 수행하여 간단한 웹 서버를 사용할 수 있습니다.

python -m http.server

생성된 자산이 들어 있는 폴더.

이게 도움이 됐으면 좋겠네요!

Nuxt는 서버 측 렌더링을 사용합니다.

여기서 더 읽을 수 있습니다.

정적 HTML 파일을 생성하려면 다음을 수행합니다.

nuxt generate

설명:Vanilla Vue.js 응용 프로그램은 페이지가 로드되고 JavaScript가 실행될 수 있을 때만 렌더링됩니다.즉, JavaScript가 활성화되지 않은 일부 클라이언트(웹 크롤러)는 페이지를 볼 수 없습니다.또, Vue.js 가 페이지를 렌더링 할 수 있게 되기 전에, 플레인 HTML 파일이 이미 표시되고 있는 경우는, 화면이 공백이 됩니다.

SSR(Server-side Rendering)은 서버에서 SPA(Single Page App)를 렌더링한 후 완전히 렌더링된 페이지를 클라이언트에 전송하는 기술입니다.다음으로 클라이언트의 JavaScript 번들이 인계되어 SPA가 정상적으로 동작합니다.

이는 SEO 및 소셜 미디어 채널에 메타데이터를 제공하는 데에도 도움이 됩니다.

단, 단점(상기하신 바와 같이)은 페이지를 렌더링하기 위해 Node.js 프로세스를 실행해야 하기 때문에 CDN에서 이러한 애플리케이션을 호스트할 수 없습니다.

구축 중인 것이 웹사이트가 아닌 실제 애플리케이션이라면 SSR은 SPA와 중복됩니다.웹사이트는 대부분 정보를 표시해야 하며 인터랙티브해서는 안 됩니다.링크, 쿠키, CSS를 사용한 플레인 HTML 등의 웹 기반 메커니즘을 활용해야 합니다.반대로 웹 어플리케이션(예:Vue.js 어플리케이션)은 모바일 어플리케이션과 비슷해야 합니다.다운로드하는 것은 크지만 퍼포먼스는 향상되고 인터랙티브한 익스피리언스도 대폭 향상됩니다.이러한 어플리케이션은 서버측 렌더링이 필요하지 않습니다.왜냐하면 조금 더 로드될 때까지 기다릴 수 있고 검색엔진에 의해 인덱싱되어서는 안 되기 때문입니다(웹사이트가 아닙니다).

언급URL : https://stackoverflow.com/questions/59829082/vue-nuxt-why-cant-i-see-the-generated-htmls-correctly