Vue-Nuxt:为什么我不能正确看到生成的HTML?

问题描述 投票:1回答:2

因此,当我键入npm run generate时,Nuxt会将我的项目生成到文件夹dist中。在该文件夹中,我可以找到一个名为_nuxt的文件夹,其中有js文件和index.html文件,但是当我打开它时,它在浏览器中没有显示任何内容。

所以,我的问题是:不是那些静态文件吗?

[您知道,当您使用CDN时,您拥有HTML文件,然后单击并在浏览器上显示所有内容,因为这些html文件是静态的,因此它们不需要内部localhost服务器。 为什么npm run generate不做同样的事情?或如何查看这些生成的文件?

html vuejs2 static nuxt.js
2个回答
1
投票

Nuxt使用服务器端渲染。

您可以阅读更多here

要生成静态HTML文件,请运行:

nuxt generate

说明:仅当页面加载且JavaScript可以开始运行时,才会呈现Vanilla Vue.js应用程序。这意味着某些未启用JavaScript的客户端(网络搜寻器)将看不到该页面。同样在Vue.js呈现页面之前的一小段时间内,当纯HTML文件可能已经可见时,出现了空白屏幕。

现在,服务器端渲染(SSR)是一种用于渲染单页应用程序(SPA)的技术在服务器上,然后将完全渲染的页面发送给客户端。然后,客户的JavaScript捆绑包就可以接管,SPA可以正常运行。

这也可以帮助SEO并向社交媒体渠道提供元数据。

但是不利的是(如您所提到的,此类应用程序不能托管在CDN上,因为您必须运行Node.js进程才能呈现页面。

我认为,如果要构建的实际上是应用程序而非网站,则SSR与SPA无关。网站应主要显示信息,并且不应是交互式的。它应该利用基于Web的机制,例如链接,cookie和带有CSS的纯HTML。相比之下,Web application(例如Vue.js应用程序)应该更像是一个移动应用程序:下载量更大,但性能更好,并且提供了更多的交互体验。这样的应用程序不需要服务器端渲染,因为我们可以等待它加载更多内容,并且因为它不应该被搜索引擎索引(它不是网站)。


0
投票

正如@aljazerzen所解释的,Vue,js并非开箱即用,SSR的目的之一就是为您提供SSR,作为一种好处,您还可以生成一个网站的静态版本。如果我正确地得到了您想要的东西,那么您要做的就是打开Nuxt.jsNuxt.js为您生成的那个)时,您可以看到您的功能网页。当您以index.html网址访问您的网站时,您的浏览器(至少我已经看到它发生在Chrome中)不会加载您的file:///文件。

我手头没有任何Nuxt生成的网站,所以我无法确切告诉您为什么会这样。但这是我的猜测:当Nuxt生成这些文件时,会给它们一个.js,它无法以src的形式访问,也许以file:///的形式访问,当它尝试加载时,认为它是根文件夹的/your_js.js,而不是相对于您网站根目录(/)的相对位置。

解决此问题的方法是使用任何Web服务器来服务您的资产。根据/

nuxt生成Nuxt.js's documentation

您可以输入以下内容进行快速测试并使用简单的Web服务器:

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

在包含您生成的资产的文件夹中。

希望这会有所帮助!

© www.soinside.com 2019 - 2024. All rights reserved.