vue生成静态js文件

by Ondřej Polesný

通过OndřejPolesný

如何立即使用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 generationVue Server Renderer —在实际生成静态文件之前启用页面的服务器端渲染
• Vue-Meta — Manages page metadata infoVue-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 nutshell, you need npx (shipped with NPM by default) installed and run:

为了开始使用Nuxt建立网站，您需要安装它。 请参阅Nuxt.js网页上的详细安装说明。 简而言之，您需要安装npx (默认情况下附带NPM)并运行：

npx create-nuxt-app <website-name>

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

您可以仅使用默认选择，除非另有选择。

组件 (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:

在我以前的一篇文章中，我解释了如何创建模板布局和组件。 所有这些都在单个文件components.js中定义。 这需要通过Nuxt进行更改。 所有组件都需要从components.js文件中提取到文件夹components下的单独文件中。 看一下我的blog-list组件及其先前的实现：

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:

要分离它，您还需要更改组件的语法以匹配以下模板：

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

Therefore my adjusted Blog-list component looks like this:

因此，我调整后的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.

您会看到模板保持不变。 更改的是export default部分中的实现。 此外，过去还存在从无头CMS Kentico Cloud收集数据的功能。

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:

该内容现在存储在Vuex商店中。 我将在后面解释这部分。 以此方式转换所有组件，以将模板包含在<templa te>标记内，并在ithin &l t; script>标记内实现。 您应该最终得到与我类似的文件结构：

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.

请注意，这里有两个新组件-菜单和标题。 因为我的目的还在于提高性能，所以我决定从我的网站中删除jQuery。 jQuery是一个庞大而笨重的库，仅用于小型UI效果。 我只用Vue.js就可以重新创建它们。 因此，我将静态HTML表示头转换为组件。 我还将与UI相关的功能添加到此组件的已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.

我曾经在网站上利用Vue事件。 主要原因是reCaptcha控件用于表单验证。 初始化后，它将广播事件，以便表单组件可以解锁联系表单的提交按钮。

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文件。 因此，我创建了一个新的recaptcha.js文件，其中包含一个简单的函数，当reCaptcha准备就绪时会发出事件。 请注意，与其仅为事件创建新的Vue.js实例let bus = new Vue();在我的旧代码中为let bus = new Vue(); )，还可以以相同的方式简单地使用this.$nuxt 。

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

布局和页面 (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.

页面的主要框架是index.html ，每个页面都以常量定义了自己的布局，这些常量被移交给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标签和任何HTML页面的其他要素的主框架都由Nuxt处理。 实际的网站实现仅处理量w ithin <body>标记。 将所有pages into layouts通用的布局移动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标记。 但是，请注意<scri pt>部分。 我要在此布局模板中使用的所有组件都需要从其位置导入，并在导出的对象中指定。

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

页面组件先前在app.js定义为常量。 以我的旧主页为例：

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:

所有这些页面都需要在pages文件夹内的单独文件中定义。 主页始终称为index.vue 。 这是我的新pages/index.vue (我的主页)的样子：

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

资产存放地点 (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:

每个网站上都有CSS样式表，图像，徽标和JavaScript等资产。 使用Nuxt，所有这些静态文件都需要存储在文件夹static下。 因此，文件夹结构当前如下所示：

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

当您引用CSS样式表中的任何资源(如字体或图像)时，您需要使用静态文件夹作为根目录：

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

获取内容 (Getting Content)

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

在所有组件和页面就绪之后，我们终于可以实现：将内容添加到组件中。

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获取内容与以前有所不同。 使用静态站点生成器时，此过程的重要方面是，在生成所有页面之前需要收集内容。 否则，您最终将获得一个静态网站，但对内容的请求仍将是动态的，从而使每个访问者的浏览器都无法访问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包含两个特殊方法，这些方法在正确的时间(即生成页面之前)处理异步数据获取。 这些方法是asyncData和fetch 。 它们仅对页面组件(即pages文件夹中的文件)可用，并且用途相同，但是asyncData会自动将接收到的数据存储在组件数据集中。

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.

如果您在一个页面上使用相同数据集的多个组件，这将是有益的。 就我而言，我什至有多个页面，其中包含需要共享同一数据的许多组件。 因此，我要么需要在每个页面上请求相同的数据，要么使用所有页面和组件都可以访问的共享空间。

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对我们来说非常容易。 它会自动包含Vuex存储，这使我们的组件和页面可以访问存储中的任何数据。 要开始使用商店，您需要做的就是在store文件夹中创建一个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:

您会看到实例具有一些属性：

• State

  州

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

  状态类似于组件中的数据。 它包含用于存储数据的数据字段的定义。

• Mutations

  变异

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

  突变是允许在状态(突变状态)中更改数据的特殊功能。

• Actions

  动作

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

  动作是简单的方法，使您能够例如执行内容收集逻辑。

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组件。 该组件需要一系列博客文章才能呈现其标记。 因此，博客文章需要存储在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:

以这种方式调整Vuex存储后， Blog-list组件可以使用其数据：

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

我已经在上面共享了此组件的整个实现。 如果您注意到了，它将computed功能用作组件标记和Vuex存储之间的中间层。 中间层可确保组件仅显示特定数量的商品，如在“ limit字段中配置的那样。

查询无头CMS (Querying the Headless CMS)

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

也许您还记得deliveryClient用于将数据从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.

免责声明：我为Kentico工作，该公司是CMS供应商，既提供传统(耦合)CMS，又提供新的云计算式无头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:

只需稍作调整，即可在Vuex存储操作中使用完全相同的逻辑。 Kentico Cloud具有适用于Nuxt.js的模块 ，请使用以下命令进行安装：

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:

使用此模块，您可以像以前一样继续使用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使用订购，则可能需要在store/index.js文件中包括另一个导入：

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:

现在，当实现内容收集逻辑时，该使用我前面提到的特殊异步函数提取了。 请参阅index.vue页面中的实现：

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!

调用store.dispatch自动调用getBlogPosts操作。 在getBlogPosts实现中，请注意对context.commit的调用。 context是指Vuex存储，并且commit会将博客帖子数据setBlogPosts给setBlogPosts突变。 用博客文章更新数据集会更改商店的状态(对其进行突变)。 我们快完成了！

其他内容存储选项 (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无头CMS及其API，因为我在本系列的所有文章中都使用了它。 如果你也想看看其他的选择，你可以找到无头的CMS和他们的特征，在一个独立的名单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.

如果您不想使用无头CMS及其API，则可以决定以其他方式存储内容-通常作为一组直接存储在项目或Git存储库中的markdown文件。 您可以在nuxt-markdown-example GitHub存储库中找到这种方法的一个很好的示例。

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文件正确配置整个应用程序。 该文件包含有关使用的模块，它们的配置和站点必不可少的信息，例如标题或SEO标签。 我的网站的配置如下所示：

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.

头部分描述了网站要领，例如要包含在标题中的title和meta标记。

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配置。 第一个列出了应用程序依赖的所有模块，第二个列出了特定的模块配置。 这是您需要放置项目API密钥的地方。

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

要查看元标记的所有选项，请参阅https://github.com/declandewet/vue-meta

运行并生成 (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:

在任何人都可以访问静态站点或将其上传到FTP服务器之前，需要生成静态站点。 但是，在开发阶段中每次进行更改都会重新生成站点，这将非常耗时。 因此，您可以使用以下命令在本地运行该应用程序：

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.

这将为您创建一个开发服务器，并使您能够访问http：// localhost：8000(或类似地址)上的网站。 在保持控制台运行此命令的同时，您对脚本所做的每项更改都将立即对网站生效。

To generate a true static site, execute following command:

要生成一个真正的静态站点，请执行以下命令：

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.

输出，即您的静态站点，将位于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.

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

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

1. How to start creating an impressive website for the first time

   如何首次开始创建令人印象深刻的网站

2. How to decide on the best technology for your website?

   如何为您的网站选择最佳技术？

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

   如何通过Vue.js和最少的精力为您的网站加电

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

   如何将无头CMS与Vue.js网站混合并支付零费用

5. How to Make Form Submissions Secure on an API Website

   如何在API网站上确保表单提交的安全

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

   用CMS构建超快速，安全的网站没什么大不了的。 还是？

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

   如何立即使用Vue.js生成静态网站

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

   如何快速设置静态站点的构建过程

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

vue生成静态js文件