因此,当我键入npm run generate
时,Nuxt会将我的项目生成到文件夹dist
中。在该文件夹中,我可以找到一个名为_nuxt
的文件夹,其中有js文件和index.html
文件,但是当我打开它时,它在浏览器中没有显示任何内容。
所以,我的问题是:不是那些静态文件吗?
[您知道,当您使用CDN时,您拥有HTML文件,然后单击并在浏览器上显示所有内容,因为这些html文件是静态的,因此它们不需要内部localhost服务器。 为什么npm run generate
不做同样的事情?或如何查看这些生成的文件?
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应用程序)应该更像是一个移动应用程序:下载量更大,但性能更好,并且提供了更多的交互体验。这样的应用程序不需要服务器端渲染,因为我们可以等待它加载更多内容,并且因为它不应该被搜索引擎索引(它不是网站)。
正如@aljazerzen所解释的,Vue,js并非开箱即用,SSR
的目的之一就是为您提供SSR,作为一种好处,您还可以生成一个网站的静态版本。如果我正确地得到了您想要的东西,那么您要做的就是打开Nuxt.js
(Nuxt.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).
在包含您生成的资产的文件夹中。
希望这会有所帮助!