Vue -Следующий: Почему я не могу правильно увидеть сгенерированные HTML?

Question

Поэтому, когда я набираю npm run generate Nuxt генерирует мой проект в папку dist. В этой папке я могу найти папку с именем _nuxt, где у меня есть .js файлы и index.html файл, но когда я открываю его в браузере, он ничего не показывает.

Итак, мой вопрос это: Разве это не * stati c файлы?

Когда вы работаете с CDN, обслуживаемым vue.js, у вас есть файл html, и вы нажимаете и все отображается в браузере, потому что эти .html файлы имеют статус c, им не нужен внутренний сервер localhost. Почему npm run generate не делает то же самое? Или как я могу увидеть эти сгенерированные файлы?

Answer 1

Как объяснил @ aljazerzen , Vue, js не выполняет SSR из коробки, одна из целей Nuxt.js - предоставить SSR для вас, в качестве преимущества вы также можете создать stati c версию вашего сайта. Если я получаю то, что вы хотите правильно, то вы хотите, чтобы при открытии вашего index.html (того, который Nuxt. js сгенерировал для вас) вы могли видеть свою функциональную веб-страницу. Когда вы обращаетесь к своему веб-сайту как file:/// URL, ваш браузер (по крайней мере, я видел, как это происходит с Chrome) не загружает ваши .js файлы.

Я не иметь под рукой любые сгенерированные Nuxt-сайты, поэтому я не могу точно сказать, почему это произошло. Но это мое предположение: когда Nuxt генерирует эти файлы, он дает им src, к которому нельзя получить доступ как file:///, возможно, что-то как /your_js.js, что при попытке загрузить его, считает, что это / из папки root, а не относительно root (/) вашего веб-сайта.

Решение этой проблемы состоит в обслуживании ваших ресурсов с использованием любого веб-сервера. Согласно документации Nuxt. js :

генерирование nuxt : Build the application and generate every route as a HTML file (used for static hosting).

Вы можете выполнить быстрый тест и использовать простой веб-сервер, набрав:

python -m http.server

В папке, содержащей ваши сгенерированные ресурсы.

Надеюсь, это поможет!

Answer 2

Nuxt использует рендеринг на стороне сервера.

Вы можете прочитать подробнее здесь .

Для генерации файлов stati c HTML, Выполнить:

nuxt generate

Объяснение: Приложение Vanilla Vue. js отображается только при загрузке страницы и может запускаться JavaScript. Это означает, что некоторые клиенты, у которых не включен JavaScript (веб-сканеры), не увидят страницу. Также на короткую секунду перед тем, как Vue. js сможет отобразить страницу, появляется пустой экран, когда простые HTML файлы уже могут быть видны.

Теперь рендеринг на стороне сервера (SSR) методика визуализации одностраничного приложения (SPA) на сервере и последующей отправки полностью обработанной страницы клиенту . Клиентский пакет JavaScript может затем вступить во владение, и SPA может работать как обычно.

Это также может помочь с SEO и предоставлением метаданных для каналов социальных сетей.

Но, с другой стороны (как вы упомянули), такое приложение не может быть размещено на CDN, так как у вас есть чтобы запустить Node.js процесс для отображения страницы.

По моему мнению, SSR избыточен с SPA, если то, что вы создаете, на самом деле является приложением, а не веб-сайтом. Веб-сайт должен в основном отображать информацию и не должен быть интерактивным. Он должен использовать веб-механизмы, такие как ссылки, файлы cookie и обычный HTML с CSS. В отличие от этого, веб-приложение (например, Vue. js приложение) должно больше походить на мобильное приложение: оно больше для загрузки, но работает лучше и предлагает гораздо больше интерактивного опыта. Такое приложение не требует рендеринга на стороне сервера, так как мы можем ждать, пока оно загрузится немного больше, и потому что оно не должно индексироваться поисковыми системами (это не веб-сайт).