Question

最近我爱上了Vue.js的single file components。让组件的模板和样式彼此接近是非常好的，而且我发现我编写的bug很少，因为它很容易组合部分页面并在多个地方使用它。

我想知道我是否可以将这个单文件组件结构扩展为生成静态HTML页面，而不涉及Vue。

例如，假设我想要一个包含标题，部分和页脚的主“内容”div的页面。使用Vue.js，我可以创建'header'，'section'和'footer'组件，并使用JavaScript在页面加载后实例化它们。因为页面的每个部分都在它自己的组件中，所以一个组件中的CSS不可能影响另一个组件，并且我有一个更清晰的文件树可供编辑。

然而，这似乎有点浪费，因为这些组件实际上并不是交互式的：我没有使用v-model或v-bind或v-on，我只是使用Vue。 js因为它让我分开了一些页面。这也意味着如果禁用JavaScript，我的页面根本不起作用，因为每个元素（保存主内容div）都依赖于Vue可用。

那么有什么方法可以编译.vue文件，而不是使用Vue.js在运行时加载这些组件的页面，而是分离没有任何JavaScript渲染的HTML和CSS文件？

理想情况下，我有一个组件'greeting.vue'：

<template>
    <p class="greeting">Hello!</p>
</template>
<style scoped>
    .greeting { color: red; }
</style>

在页面中使用：

<html>
    <body>
        <greeting></greeting>
    </body>
</html>

这些将编译成两个文件：一个HTML页面，其中包含编译和预渲染的模板，以及一个CSS文件，其中包含所有组件的样式。然后我可以在页面中包含生成的样式表，并且所有组件都将被设置样式。

我查看了vue-loader和vueify，但由于我没有充分使用Webpack或Browserify，我无法理解他们正在做什么。

我正在尝试做什么？

Answer 1

您正在寻找的是服务器端渲染。我建议你看看Nuxt.js.

From VueJS docs:

正确配置生产就绪的所有讨论方面服务器呈现的应用程序可能是一项艰巨的任务。幸运的是，有一个优秀的社区项目，旨在使这一切变得更加容易： Nuxt.js. Nuxt.js是一个建立在Vue之上的更高级别的框架生态系统，提供极为简化的发展编写通用Vue应用程序的经验。更好的是，你可以甚至将它用作静态站点生成器（将页面编写为单文件Vue组件）！我们强烈建议您尝试一下。

获得它started非常简单。如果您使用vue-cli：

$ vue init nuxt/starter <project-name>

它伴随着您通常需要的一切（Vuex，路由器，......）。请记住，它强制执行一些您必须遵循的文件夹结构。

Here是启动器中包含的命令列表。

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}

你可能会在generate中重复使用，因为它

构建应用程序并生成每个路径作为HTML文件（使用用于静态托管）。

值得注意的是，该项目似乎是（在撰写本文时）under active development，我们可以期待更多精彩的功能！

Answer 2

来自官方vuejs指南：

如果您使用的是Webpack，则可以使用prerender-spa-plugin轻松添加预渲染。它已经过Vue应用程序的广泛测试 - 实际上，创建者是Vue核心团队的成员。

Answer 3

我会说你不能这样做，因为Vue使用虚拟DOM，它不会将模板编译到HTML，而是编译为render functions，这是有效修补的必要条件数据更新时的DOM。

我确信你可以用一些node魔法来做你想做的事情来解析和输出文件，但对于那些效果最小的东西来说，这是一项相当大的工作。

Answer 4

有很多插件。

为较小的项目安装Vue Meta。如果您只有几个静态页面，我建议您使用Vue meta，然后手动或使用预渲染服务为同一页面创建一些HTML文件。

预渲染的问题仅在某些设置中可用，如果您还没有理想的设置，则需要重新构建它以优化SEO和在Vue.js中进行预渲染，安装可能会困难。

因此，我建议以下内容：

对于小型应用程序：Vue Meta

npm install vue-meta --save

对于具有动态渲染功能的中型或大型应用程序：

具有SSR（服务器端渲染）的nuxt.js：

有关如何使用nuxt.js和SSR构建网络应用的更多信息，请参见YouTube上的此视频搜索：

https://www.youtube.com/results?search_query=nuxt+js+and+ssr

是否可以将Vue.js模板编译为静态HTML和CSS文件？

4 个答案: