vue生成靜態(tài)js文件

by Ond?ej Polesny

通過(guò)Ond?ejPolesny

如何立即使用Vue.js生成靜態(tài)網(wǎng)站 (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?

您已決定建立一個(gè)靜態(tài)站點(diǎn)，但是從哪里開始呢？ 您如何在沒(méi)有經(jīng)驗(yàn)的情況下為工作選擇合適的工具？ 您如何才能確保第一次成功，同時(shí)避免使用最終無(wú)法幫助您的工具？

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

在本文中，您將學(xué)習(xí)如何將Vue.js網(wǎng)站調(diào)整為自動(dòng)生成為靜態(tài)網(wǎng)站。

介紹 (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:

在上一篇文章中，我總結(jié)了基于API的網(wǎng)站與靜態(tài)網(wǎng)站之間的主要區(qū)別。 快速提醒一下，靜態(tài)網(wǎng)站是：

• Blazing fast
  快速燃燒
• Secure (as they are just a set of static pages)
  安全(因?yàn)樗鼈冎皇且唤M靜態(tài)頁(yè)面)
• Regenerated every time editors update the content
  每次編輯者更新內(nèi)容時(shí)都會(huì)重新生成
• Compatible with additional dynamic functionality
  與其他動(dòng)態(tài)功能兼容

什么是靜態(tài)網(wǎng)站生成器？ (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.

靜態(tài)網(wǎng)站生成器是一種根據(jù)網(wǎng)站的實(shí)現(xiàn)和內(nèi)容生成靜態(tài)網(wǎng)站的工具。

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.

內(nèi)容可以通過(guò)REST API來(lái)自無(wú)頭內(nèi)容管理系統(tǒng)。 該網(wǎng)站實(shí)現(xiàn)使用JavaScript框架之一，例如Vue.js或React。 靜態(tài)網(wǎng)站生成器的輸出是構(gòu)成網(wǎng)站的一組靜態(tài)文件。

靜態(tài)網(wǎng)站實(shí)施 (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的靜態(tài)站點(diǎn)生成器。

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).

如果您使用其他框架，請(qǐng)尋找在該框架之上構(gòu)建的靜態(tài)站點(diǎn)生成器(例如Gatsby for React.js )。

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

本質(zhì)上，Nuxt是多個(gè)工具的組合，可以使您一起創(chuàng)建靜態(tài)站點(diǎn)。 這些工具包括：

• Vue2 — Core Vue.js library.
  Vue2 —核心Vue.js庫(kù)。
• Vue Router — Handles URL routing for pages within the website.
  Vue路由器-處理網(wǎng)站內(nèi)頁(yè)面的URL路由。
• Vuex — Memory store for data that are shared by components.
  Vuex-內(nèi)存存儲(chǔ)區(qū)，用于共享組件。
• Vue Server Renderer — Enables server side rendering of pages before the actual static files generation
  Vue Server Renderer —在實(shí)際生成靜態(tài)文件之前啟用頁(yè)面的服務(wù)器端渲染
• Vue-Meta — Manages page metadata info
  Vue-Meta —管理頁(yè)面元數(shù)據(jù)信息

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

Nuxt還定義了如何構(gòu)建網(wǎng)站以生成靜態(tài)文件。

安裝 (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 nutshell, you need npx (shipped with NPM by default) installed and run:

為了開始使用Nuxt建立網(wǎng)站，您需要安裝它。 請(qǐng)參閱Nuxt.js網(wǎng)頁(yè)上的詳細(xì)安裝說(shuō)明。 簡(jiǎn)而言之，您需要安裝npx (默認(rèn)情況下附帶NPM)并運(yùn)行：

npx create-nuxt-app <website-name>

You can just use default selections, unless you have preferences otherwise.

您可以僅使用默認(rèn)選擇，除非另有選擇。

組件 (Components)

In one of my previous articles I explained how to create a template layout and components. All of them were defined within single file components.js. That needs to be changed with Nuxt. All components need to be extracted from components.js file into separate files under folder components. Take a look at my blog-list component and its previous implementation:

在我以前的一篇文章中，我解釋了如何創(chuàng)建模板布局和組件。 所有這些都在單個(gè)文件components.js中定義。 這需要通過(guò)Nuxt進(jìn)行更改。 所有組件都需要從components.js文件中提取到文件夾components下的單獨(dú)文件中。 看一下我的blog-list組件及其先前的實(shí)現(xiàn)：

Vue.component('blog-list', { props: ['limit'], data: function(){ return { articles: null } },created: function(){ var query = deliveryClient .items() .type('blog_post') .elementsParameter(['link', 'title', 'image_url', 'image', 'teaser']) .orderParameter('elements.published', SortOrder.desc); if (this.limit){ query = query.limitParameter(this.limit); } query .getPromise() .then(response => this.$data.articles = response.items.map(item => ({ url: item.link.value, header: item.title.value, image: item.image_url.value != '' ? item.image_url.value : item.image.assets[0].url, teaser: item.teaser.value })) ); },template: ` <section class="features"> <article v-for="article in articles"> ... </article> </section> ` });

To separate it, you also need to change the component’s syntax to match the following template:

要分離它，您還需要更改組件的語(yǔ)法以匹配以下模板：

<template> HTML of the component</template><script> export default { Vue.js code }</script>

Therefore my adjusted Blog-list component looks like this:

因此，我調(diào)整后的Blog-list組件如下所示：

<template> <section class="features"> <article v-for="article in blogPosts"> ... </article> </section></template><script> export default { props: ['limit'], computed: { blogPosts: function(){ return this.$store.state.blogPosts && this.limit && this.$store.state.blogPosts.length > this.limit ? this.$store.state.blogPosts.slice(0, this.limit) : this.$store.state.blogPosts; } } }</script>

You see the template stayed the same. What changed is the implementation that is now within export default section. Also, there used to be a function gathering data from headless CMS Kentico Cloud.

您會(huì)看到模板保持不變。 更改的是export default部分中的實(shí)現(xiàn)。 此外，過(guò)去還存在從無(wú)頭CMS Kentico Cloud收集數(shù)據(jù)的功能。

That content is now stored within Vuex store. I will explain this part later. Convert all of your components this way, to contain template within <template> tags and implementation within &lt;script> tags. You should end up with a similar file structure as I have:

該內(nèi)容現(xiàn)在存儲(chǔ)在Vuex商店中。 我將在后面解釋這部分。 以此方式轉(zhuǎn)換所有組件，以將模板包含在<templa te>標(biāo)記內(nèi)，并在ithin &l t; script>標(biāo)記內(nèi)實(shí)現(xiàn)。 您應(yīng)該最終得到與我類似的文件結(jié)構(gòu)：

Note that I have two new components here — Menu and Header. As my aim was to also improve performance, I decided to remove jQuery from my website. jQuery is quite a large and heavy library that was used only for small UI effects. I was able to recreate them using just Vue.js. Therefore, I converted the static HTML representing header to component. I also added the UI related functionality into mounted function of this component.

請(qǐng)注意，這里有兩個(gè)新組件-菜單和標(biāo)題。 因?yàn)槲业哪康倪€在于提高性能，所以我決定從我的網(wǎng)站中刪除jQuery。 jQuery是一個(gè)龐大而笨重的庫(kù)，僅用于小型UI效果。 我只用Vue.js就可以重新創(chuàng)建它們。 因此，我將靜態(tài)HTML表示頭轉(zhuǎn)換為組件。 我還將與UI相關(guān)的功能添加到此組件的已mounted功能中。

mounted: function(){ window.addEventListener(‘scroll’, this.scroll); …},methods: { scroll: function(){ … }}

使用Nuxt處理Vue.js事件 (Handling Vue.js Events with Nuxt)

I used to leverage Vue events in my website. The main reason was reCaptcha control used for form validation. When it was initialized, it would broadcast the event so that form component can unlock the submit button of the contact form.

我曾經(jīng)在網(wǎng)站上利用Vue事件。 主要原因是reCaptcha控件用于表單驗(yàn)證。 初始化后，它將廣播事件，以便表單組件可以解鎖聯(lián)系表單的提交按鈕。

With Nuxt, I no longer use app.js or components.js files. Therefore I created a new recaptcha.js file that contains a simple function emitting the event when reCaptcha gets ready. Note that instead of creating new Vue.js instance just for events (let bus = new Vue(); in my old code), it is possible to simply use this.$nuxt the same way.

使用Nuxt，我不再使用app.js或components.js文件。 因此，我創(chuàng)建了一個(gè)新的recaptcha.js文件，其中包含一個(gè)簡(jiǎn)單的函數(shù)，當(dāng)reCaptcha準(zhǔn)備就緒時(shí)會(huì)發(fā)出事件。 請(qǐng)注意，與其僅為事件創(chuàng)建新的Vue.js實(shí)例let bus = new Vue();在我的舊代碼中為let bus = new Vue(); )，還可以以相同的方式簡(jiǎn)單地使用this.$nuxt 。

var recaptchaLoaded = function(){ this.$nuxt.$emit('recaptchaLoaded');}

布局和頁(yè)面 (Layout and Pages)

The main frame of the page was index.html, and each page defined its own layout in constants that were handed over to Vue router.

頁(yè)面的主要框架是index.html ，每個(gè)頁(yè)面都以常量定義了自己的布局，這些常量被移交給Vue路由器。

With Nuxt, the main frame including <html> tag, meta tags and other essentials of any HTML page are handled by Nuxt. The actual website implementation is handling only content within <body> tags. Move the layout that is common for all your pages into layouts/default.vue and respect the same template as with components. My layout looks like this:

使用Nuxt，包括<ht ml> tag ，meta標(biāo)簽和任何HTML頁(yè)面的其他要素的主框架都由Nuxt處理。 實(shí)際的網(wǎng)站實(shí)現(xiàn)僅處理量w ithin <body>標(biāo)記。 將所有pages into layouts通用的布局移動(dòng)pages into layouts /default.vue中，并使用與組件相同的模板。 我的布局如下所示：

<template> <div> <Menu></Menu> <div id="page-wrapper"> <Header></Header> <nuxt/> <section id="footer"> <div class="inner"> … <ContactForm></ContactForm> … </div> </section> </div> </div></template><script> import ContactForm from ‘~/components/Contact-form.vue’ import Menu from ‘~/components/Menu.vue’ import Header from ‘~/components/Header.vue’ export default { components: { ContactForm, Menu, Header } } </script>

The layout is basically the HTML markup of my old index.html. However, note the <script> section. All of the components I want to use within this layout template need to be imported from their location and specified in exported object.

布局基本上是我的舊index.htmlHTML標(biāo)記。 但是，請(qǐng)注意<scri pt>部分。 我要在此布局模板中使用的所有組件都需要從其位置導(dǎo)入，并在導(dǎo)出的對(duì)象中指定。

Page components were previously defined in app.js as constants. Take a look at my old Home page for example:

頁(yè)面組件先前在app.js定義為常量。 以我的舊主頁(yè)為例：

const Home = { template: ` <div> <banner></banner> <section id="wrapper"> <about-overview></about-overview> ... <blog-list limit="4"></blog-list> <ul class="actions"> <li><a href="/blog" class="button">See all</a></li> </ul> ... </section> </div> `}

All these pages need to be defined in separate files within pages folder. Main page is always called index.vue. This is how my new pages/index.vue (my Homepage) looks like:

所有這些頁(yè)面都需要在pages文件夾內(nèi)的單獨(dú)文件中定義。 主頁(yè)始終稱為index.vue 。 這是我的新pages/index.vue (我的主頁(yè))的樣子：

<template> <div> <Banner></Banner> <section id="wrapper"> <AboutOverview></AboutOverview> ... <BlogList limit="4"></BlogList> <ul class="actions"> <li><a href="/blog" class="button">See all</a></li> </ul> ... </section> </div></template><script> import Banner from ‘~/components/Banner.vue’ import AboutOverview from ‘~/components/About-overview.vue’ import BlogList from ‘~/components/Blog-list.vue’ export default { components: { Banner, AboutOverview, BlogList }, }</script>

資產(chǎn)存放地點(diǎn) (Where to Store Assets)

On every website there are assets like CSS stylesheets, images, logos, and JavaScripts. With Nuxt, all these static files need to be stored under folder static. So the folder structure currently looks like this:

每個(gè)網(wǎng)站上都有CSS樣式表，圖像，徽標(biāo)和JavaScript等資產(chǎn)。 使用Nuxt，所有這些靜態(tài)文件都需要存儲(chǔ)在文件夾static下。 因此，文件夾結(jié)構(gòu)當(dāng)前如下所示：

When you reference any resources from CSS stylesheets like fonts or images, you need to use static folder as a root:

當(dāng)您引用CSS樣式表中的任何資源(如字體或圖像)時(shí)，您需要使用靜態(tài)文件夾作為根目錄：

background-image: url("~/assets/images/bg.jpg");

獲取內(nèi)容 (Getting Content)

With all the components and pages in place, we finally get to it: getting content into components.

在所有組件和頁(yè)面就緒之后，我們終于可以實(shí)現(xiàn)：將內(nèi)容添加到組件中。

Getting content using Nuxt is a bit different than it used to be. The important aspect of this process when using a static site generator is that the content needs to be gathered before all the pages are generated. Otherwise you will end up with a static website, but requests for content would still be dynamic, hitting the headless CMS from each visitor’s browser and you would lose the main benefit.

使用Nuxt獲取內(nèi)容與以前有所不同。 使用靜態(tài)站點(diǎn)生成器時(shí)，此過(guò)程的重要方面是，在生成所有頁(yè)面之前需要收集內(nèi)容。 否則，您最終將獲得一個(gè)靜態(tài)網(wǎng)站，但對(duì)內(nèi)容的請(qǐng)求仍將是動(dòng)態(tài)的，從而使每個(gè)訪問(wèn)者的瀏覽器都無(wú)法訪問(wèn)CMS，您將失去主要的好處。

Nuxt contains two special methods that handle asynchronous data fetching at the right time, that is before the pages are generated. These methods are asyncData and fetch. They are available only to page components (that is files within pages folder) and their purpose is the same, but asyncData will automatically store received data within the component dataset.

Nuxt包含兩個(gè)特殊方法，這些方法在正確的時(shí)間(即生成頁(yè)面之前)處理異步數(shù)據(jù)獲取。 這些方法是asyncData和fetch 。 它們僅對(duì)頁(yè)面組件(即pages文件夾中的文件)可用，并且用途相同，但是asyncData會(huì)自動(dòng)將接收到的數(shù)據(jù)存儲(chǔ)在組件數(shù)據(jù)集中。

This can be beneficial if you have many components on a single page using the same set of data. In my case, I even have multiple pages with many components that need to share the same data. Therefore I would either need to request the same data on each page or use a shared space that all pages and components could access.

如果您在一個(gè)頁(yè)面上使用相同數(shù)據(jù)集的多個(gè)組件，這將是有益的。 就我而言，我什至有多個(gè)頁(yè)面，其中包含需要共享同一數(shù)據(jù)的許多組件。 因此，我要么需要在每個(gè)頁(yè)面上請(qǐng)求相同的數(shù)據(jù)，要么使用所有頁(yè)面和組件都可以訪問(wèn)的共享空間。

I chose the latter. Nuxt makes it very easy for us. It automatically includes Vuex store that enables our components and pages access any data that are within the store. To start using the store all you need to do is create an index.js file within the store folder.

我選擇了后者。 Nuxt對(duì)我們來(lái)說(shuō)非常容易。 它會(huì)自動(dòng)包含Vuex存儲(chǔ)，這使我們的組件和頁(yè)面可以訪問(wèn)存儲(chǔ)中的任何數(shù)據(jù)。 要開始使用商店，您需要做的就是在store文件夾中創(chuàng)建一個(gè)index.js文件。

import Vuex from 'vuex'const createStore = () => { return new Vuex.Store({ state: () => ({}), mutations: {}, actions: {}, })}export default createStore

You see the instance has a few properties:

您會(huì)看到實(shí)例具有一些屬性：

• State

  州

  State is similar to data in components. It contains definition of data fields that are used to store data.

  狀態(tài)類似于組件中的數(shù)據(jù)。 它包含用于存儲(chǔ)數(shù)據(jù)的數(shù)據(jù)字段的定義。

• Mutations

  變異

  Mutation are special functions that are permitted to change data in State (mutate the state).

  突變是允許在狀態(tài)(突變狀態(tài))中更改數(shù)據(jù)的特殊功能。

• Actions

  動(dòng)作

  Actions are simple methods that enable you to, for example, implement content gathering logic.

  動(dòng)作是簡(jiǎn)單的方法，使您能夠例如執(zhí)行內(nèi)容收集邏輯。

Let’s get back to the Blog-list component. This component needs an array of blog posts in order to render its markup. Therefore blog posts need to be stored within Vuex store:

讓我們回到Blog-list組件。 該組件需要一系列博客文章才能呈現(xiàn)其標(biāo)記。 因此，博客文章需要存儲(chǔ)在Vuex商店中：

…const createStore = () => { return new Vuex.Store({ state: () => ({ blogPosts: null }), mutations: { setBlogPosts(state, blogPosts){ state.blogPosts = blogPosts; } }, actions: { getBlogPosts (context) { logic to get content from Kentico Cloud } }, })}

After adjusting Vuex store this way, the Blog-list component can use its data:

以這種方式調(diào)整Vuex存儲(chǔ)后， Blog-list組件可以使用其數(shù)據(jù)：

<article v-for="article in $store.state.blogPosts"> …</article>

I already shared the whole implementation of this component above. If you noticed, it uses computed function as a middle layer between component markup and Vuex store. That middle layer ensures the component displays only a specific amount of articles as configured in the limit field.

我已經(jīng)在上面共享了此組件的整個(gè)實(shí)現(xiàn)。 如果您注意到了，它將computed功能用作組件標(biāo)記和Vuex存儲(chǔ)之間的中間層。 中間層可確保組件僅顯示特定數(shù)量的商品，如在“ limit字段中配置的那樣。

查詢無(wú)頭CMS (Querying the Headless CMS)

Maybe you remember the deliveryClient was used to get data from Kentico Cloud into the components.

也許您還記得deliveryClient用于將數(shù)據(jù)從Kentico Cloud獲取到組件中。

Disclaimer: I work for Kentico, a CMS vendor that provides both traditional (coupled) CMS and a new cloud-first headless CMS — Kentico Cloud.

免責(zé)聲明：我為Kentico工作，該公司是CMS供應(yīng)商，既提供傳統(tǒng)(耦合)CMS，又提供新的云計(jì)算式無(wú)頭CMS-Kentico Cloud。

The very same logic can be used here in the Vuex store actions with a little tweak. Kentico Cloud has a module for Nuxt.js, install it using following command:

只需稍作調(diào)整，即可在Vuex存儲(chǔ)操作中使用完全相同的邏輯。 Kentico Cloud具有適用于Nuxt.js的模塊 ，請(qǐng)使用以下命令進(jìn)行安裝：

npm i kenticocloud-nuxt-module — savenpm i rxjs — save

With this module you can keep using deliveryClient like before, just with a $ prefix. So in my case the logic to get blog posts looks like this:

使用此模塊，您可以像以前一樣繼續(xù)使用deliveryClient ，只是帶有$前綴。 因此，就我而言，獲取博客帖子的邏輯如下：

…getBlogPosts (context) { return this.$deliveryClient .items() ... .orderParameter('elements.published', SortOrder.desc) .getPromise() .then(response => { context.commit('setBlogPosts', response.items.map(item => ({ url: item.link.value, header: item.title.value, image: item.image_url.value != '' ? item.image_url.value : item.image.assets[0].url, teaser: item.teaser.value }))) }); },…

If you want to use ordering using the orderParameter, you may need to include another import in the store/index.js file:

如果要使用orderParameter使用訂購(gòu)，則可能需要在store/index.js文件中包括另一個(gè)導(dǎo)入：

import { SortOrder } from 'kentico-cloud-delivery'

Now when the content gathering logic is implemented, it’s time to use the special asynchronous function fetch that I mentioned before. See my implementation in the index.vue page:

現(xiàn)在，當(dāng)實(shí)現(xiàn)內(nèi)容收集邏輯時(shí)，該使用我前面提到的特殊異步函數(shù)提取了。 請(qǐng)參閱index.vue頁(yè)面中的實(shí)現(xiàn)：

async fetch ({store, params}) { await store.dispatch('getBlogPosts')}

The call to store.dispatch automatically invokes getBlogPosts action. Within the getBlogPosts implementation note the call for context.commit. context refers to Vuex store and commit will hand over blog posts data to setBlogPosts mutation. Updating the data set with blog posts changes the state of the store (mutates it). And we are almost finished!

調(diào)用store.dispatch自動(dòng)調(diào)用getBlogPosts操作。 在getBlogPosts實(shí)現(xiàn)中，請(qǐng)注意對(duì)context.commit的調(diào)用。 context是指Vuex存儲(chǔ)，并且commit會(huì)將博客帖子數(shù)據(jù)setBlogPosts給setBlogPosts突變。 用博客文章更新數(shù)據(jù)集會(huì)更改商店的狀態(tài)(對(duì)其進(jìn)行突變)。 我們快完成了！

其他內(nèi)容存儲(chǔ)選項(xiàng) (Other content storage options)

I used Kentico Cloud headless CMS and its API here, as I am using it throughout all articles in this series. If you want to also check out other options, you can find an independent list of headless CMSs and their features at headlesscms.org.

我在這里使用了Kentico Cloud無(wú)頭CMS及其API，因?yàn)槲以诒鞠盗械乃形恼轮卸际褂昧怂?如果你也想看看其他的選擇，你可以找到無(wú)頭的CMS和他們的特征，在一個(gè)獨(dú)立的名單headlesscms.org 。

If you don’t want to use a headless CMS and its API, you may decide to store your content in some other way — usually as a set of markdown files directly stored within your project or Git repository. You can find a nice example of this approach in nuxt-markdown-example GitHub repository.

如果您不想使用無(wú)頭CMS及其API，則可以決定以其他方式存儲(chǔ)內(nèi)容-通常作為一組直接存儲(chǔ)在項(xiàng)目或Git存儲(chǔ)庫(kù)中的markdown文件。 您可以在nuxt-markdown-example GitHub存儲(chǔ)庫(kù)中找到這種方法的一個(gè)很好的示例。

Nuxt配置 (Nuxt Configuration)

The whole application needs to be properly configured using Nuxt.config.js file. This file contains information about used modules, their configuration and site essentials like title or SEO tags. The configuration of my website looks like this:

需要使用Nuxt.config.js文件正確配置整個(gè)應(yīng)用程序。 該文件包含有關(guān)使用的模塊，它們的配置和站點(diǎn)必不可少的信息，例如標(biāo)題或SEO標(biāo)簽。 我的網(wǎng)站的配置如下所示：

export default { head: { title: 'Ondrej Polesny', meta: [ { charset: 'utf-8' }, ... { hid: 'description', name: 'description', content: 'Ondrej Polesny — Developer Evangelist + dog lover + freelance bus driver' } ], script: [ { src: 'https://www.google.com/recaptcha/api.js?onload=recaptchaLoaded', type: "text/javascript" }, { src: 'assets/js/recaptcha.js', type: "text/javascript" } ], }, modules: [ 'kenticocloud-nuxt-module' ], kenticocloud: { projectId: '*KenticoCloud projectId*', enableAdvancedLogging: false, previewApiKey: '' }, css: [ {src: 'static/assets/css/main.css'}, ], build: { extractCSS: { allChunks: true } }}

The head section describes website essentials like title and meta tags you want to include in header.

頭部分描述了網(wǎng)站要領(lǐng)，例如要包含在標(biāo)題中的title和meta標(biāo)記。

Note the modules and kenticocloud configuration. The first one lists all modules your application depends on and the second one is specific module configuration. This is the place where you need to put your project API key.

注意modules和kenticocloud配置。 第一個(gè)列出了應(yīng)用程序依賴的所有模塊，第二個(gè)列出了特定的模塊配置。 這是您需要放置項(xiàng)目API密鑰的地方。

To see all the options for meta tags, please refer to https://github.com/declandewet/vue-meta

要查看元標(biāo)記的所有選項(xiàng)，請(qǐng)參閱https://github.com/declandewet/vue-meta

運(yùn)行并生成 (Running and Generating)

Static sites need to be generated before anyone can access them or upload them to an FTP server. However, it would be very time consuming to regenerate the site every single time a change has been made during the development phase. Therefore, you can run the application locally using:

在任何人都可以訪問(wèn)靜態(tài)站點(diǎn)或?qū)⑵渖蟼鞯紽TP服務(wù)器之前，需要生成靜態(tài)站點(diǎn)。 但是，在開發(fā)階段中每次進(jìn)行更改都會(huì)重新生成站點(diǎn)，這將非常耗時(shí)。 因此，您可以使用以下命令在本地運(yùn)行該應(yīng)用程序：

npm run dev

This will create a development server for you and enable you to access your website on http://localhost:8000 (or similar). While you keep your console running this command, every change you make in your scripts will have immediate effect on the website.

這將為您創(chuàng)建一個(gè)開發(fā)服務(wù)器，并使您能夠訪問(wèn)http：// localhost：8000(或類似地址)上的網(wǎng)站。 在保持控制臺(tái)運(yùn)行此命令的同時(shí)，您對(duì)腳本所做的每項(xiàng)更改都將立即對(duì)網(wǎng)站生效。

To generate a true static site, execute following command:

要生成一個(gè)真正的靜態(tài)站點(diǎn)，請(qǐng)執(zhí)行以下命令：

npx nuxt generate

The output, that is your static site, will be in 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.

輸出，即您的靜態(tài)站點(diǎn)，將位于dist文件夾中。 隨時(shí)在您喜歡的文本編輯器中打開任何頁(yè)面，并查看源代碼是否包含無(wú)頭CMS的內(nèi)容。 如果是這樣，則說(shuō)明已成功獲取。

結(jié)論 (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.

具有一個(gè)生成的靜態(tài)網(wǎng)站將大大提高網(wǎng)站的性能。 與傳統(tǒng)站點(diǎn)相比，Web服務(wù)器不需要執(zhí)行任何CPU繁重的操作。 它僅提供靜態(tài)文件。

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的網(wǎng)站相比，客戶端會(huì)在第一響應(yīng)中立即收到請(qǐng)求的數(shù)據(jù)。 這就是使它們?nèi)绱丝焖俚脑?他們無(wú)需等待通過(guò)其他異步請(qǐng)求傳遞外部?jī)?nèi)容。 服務(wù)器的第一響應(yīng)中已經(jīng)存在該內(nèi)容。 這極大地改善了用戶體驗(yàn)。

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.

將網(wǎng)站從Vue.js實(shí)現(xiàn)轉(zhuǎn)換為Nuxt定義非常簡(jiǎn)單，并且不需要對(duì)所有使用的組件和軟件包有深入的了解。

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

您是否成功創(chuàng)建了第一個(gè)靜態(tài)網(wǎng)站？ 你經(jīng)歷過(guò)任何掙扎嗎？ 請(qǐng)發(fā)表評(píng)論。

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

在下一篇文章中，我將重點(diǎn)介紹靜態(tài)站點(diǎn)的自動(dòng)再生以及在何處托管靜態(tài)站點(diǎn)，請(qǐng)繼續(xù)關(guān)注。

該系列的其他文章： (Other articles in the series:)

How to start creating an impressive website for the first time

如何首次開始創(chuàng)建令人印象深刻的網(wǎng)站

How to decide on the best technology for your website?

如何為您的網(wǎng)站選擇最佳技術(shù)？

How to power up your website with Vue.js and minimal effort

如何通過(guò)Vue.js和最少的精力為您的網(wǎng)站加電

How to Mix Headless CMS with a Vue.js Website and Pay Zero

如何將無(wú)頭CMS與Vue.js網(wǎng)站混合并支付零費(fèi)用

How to Make Form Submissions Secure on an API Website

如何在API網(wǎng)站上確保表單提交的安全

Building a super-fast and secure website with a CMS is no big deal. Or is it?

用CMS構(gòu)建超快速，安全的網(wǎng)站沒(méi)什么大不了的。 還是？

How to generate a static website with Vue.js in no time

如何立即使用Vue.js生成靜態(tài)網(wǎng)站

How to quickly set up a build process for a static site

如何快速設(shè)置靜態(tài)站點(diǎn)的構(gòu)建過(guò)程

翻譯自: https://www.freecodecamp.org/news/how-to-generate-a-static-website-with-vue-js-in-no-time-e74e7073b7b8/

vue生成靜態(tài)js文件

總結(jié)

以上是生活随笔為你收集整理的vue生成静态js文件_如何立即使用Vue.js生成静态网站的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。