vue生成静态js文件_如何立即使用Vue.js生成静态网站

vue生成静态js文件

by Ondej Polesn

通过OndejPolesn

如何立即使用Vue.js生成静态网站 (How to generate a static website with Vue.js in no time)

You have decided to build a static site, but where do you start? How do you select the right tool for the job without previous experience? How can you ensure that you succeed the first time, while avoiding tools that won’t help you in the end?

您已决定建立一个静态站点，但是从哪里开始呢？您如何在没有经验的情况下为工作选择合适的工具？您如何才能确保第一次成功，同时避免使用最终无法帮助您的工具？

In this article, you will learn how to adjust a Vue.js website to be automatically generated as a static site.

在本文中，您将学习如何将Vue.js网站调整为自动生成为静态网站。

介绍 (Introduction)

I summarized the key differences between an API based website and static sites in my previous article. As a quick reminder, static sites are:

在上一篇文章中，我总结了基于API的网站与静态网站之间的主要区别。快速提醒一下，静态网站是：

Blazing fast
快速燃烧
Secure (as they are just a set of static pages)
安全(因为它们只是一组静态页面)
Regenerated every time editors update the content
每次编辑者更新内容时都会重新生成
Compatible with additional dynamic functionality
与其他动态功能兼容

什么是静态网站生成器？ (What is a Static Site Generator?)

A static site generator is a tool that generates a static website from a website’s implementation and content.

静态网站生成器是一种根据网站的实现和内容生成静态网站的工具。

Content can come from a headless content management system, through a REST API. The website implementation uses one of the JavaScript frameworks like Vue.js or React. The output of a static site generator is a set of static files that form the website.

内容可以通过REST API来自无头内容管理系统。该网站实现使用JavaScript框架之一，例如Vue.js或React。静态网站生成器的输出是构成网站的一组静态文件。

静态网站实施 (Static Site Implementation)

I chose Vue.js as the JavaScript framework to use. Therefore I will be working with Nuxt.js, which is a static site generator for Vue.js.

我选择Vue.js作为要使用JavaScript框架。因此，我将使用Nuxt.js ，它是Vue.js的静态站点生成器。

If you are using a different framework, look for a static site generator built on top of that framework (for example Gatsby for React.js).

如果您使用其他框架，请寻找在该框架之上构建的静态站点生成器(例如Gatsby for React.js )。

Essentially, Nuxt is a combination of multiple tools that together enable you to create static sites. The tools include:

本质上，Nuxt是多个工具的组合，可以使您一起创建静态站点。这些工具包括：

Vue2 — Core Vue.js library.
Vue2 —核心Vue.js库。
Vue Router — Handles URL routing for pages within the website.
Vue路由器-处理网站内页面的URL路由。
Vuex — Memory store for data that are shared by components.
Vuex-内存存储区，用于共享组件。
Vue Server Renderer — Enables server side rendering of pages before the actual static files generation
Vue Server Renderer —在实际生成静态文件之前启用页面的服务器端渲染
Vue-Meta — Manages page metadata info
Vue-Meta —管理页面元数据信息

Nuxt also defines how the website needs to be built in order to generate static files.

Nuxt还定义了如何构建网站以生成静态文件。

安装 (Installation)

In order to start building websites with Nuxt, you need to install it. See detailed installation instructions on the Nuxt.js webpage. In a e>dist folder. Feel free to open any page in your favorite text editor and see if the source code contains content from the headless CMS. If it does, it was successfully fetched.

输出，即您的静态站点，将位于dist文件夹中。随时在您喜欢的文本编辑器中打开任何页面，并查看源代码是否包含无头CMS的内容。如果是这样，则说明已成功获取。

结论 (Conclusion)

Having a generated static site will greatly improve the website’s performance. Compared to traditional sites, the webserver does not need to perform any CPU heavy operations. It only serves static files.

具有一个生成的静态网站将大大提高网站的性能。与传统站点相比，Web服务器不需要执行任何CPU繁重的操作。它仅提供静态文件。

Compared to API based websites, the clients receive requested data instantly with the very first response. That’s what makes them all that fast — they do not need to wait for external content to be delivered via additional asynchronous requests. The content is already there in the first response from the server. That dramatically improves user experience.

与基于API的网站相比，客户端会在第一响应中立即收到请求的数据。这就是使它们如此快速的原因-他们无需等待通过其他异步请求传递外部内容。服务器的第一响应中已经存在该内容。这极大地改善了用户体验。

Converting the site from Vue.js implementation to Nuxt definitions is very straightforward and does not require deep knowledge of all used components and packages.

将网站从Vue.js实现转换为Nuxt定义非常简单，并且不需要对所有使用的组件和软件包有深入的了解。

Have you successfully created your first static site? Have you experienced any struggles? Please leave a comment.

您是否成功创建了第一个静态网站？你经历过任何挣扎吗？请发表评论。

In the next article I will focus on automated regeneration of static sites and where to host them, so stay tuned.

在下一篇文章中，我将重点介绍静态站点的自动再生以及在何处托管静态站点，请继续关注。