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

【问题标题】：Is it possible to compile Vue.js templates to static HTML and CSS files?是否可以将 Vue.js 模板编译为静态 HTML 和 CSS 文件？
【发布时间】：2017-08-09 00:03:45
【问题描述】：

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

我想知道是否可以在不涉及 Vue 的情况下扩展这个单文件组件结构以生成静态 HTML 页面。

例如，假设我想要一个页面，其中包含一个主要的“内容”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。

我正在尝试做的事情可能吗？

【问题讨论】：

标签： webpack vue.js

【解决方案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，我们可以期待更多强大的功能！

【讨论】：

这就是我最终使用的。

【解决方案2】：

来自官方 vuejs 指南：

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

【讨论】：

【解决方案3】：

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

我确信使用 node 的一点魔法来解析和输出文件是可以做你想做的事的，但对于只会产生很小影响的事情来说，这将是一项相当大的工作。

【讨论】：

是的，我认为 Vue.js 本身不会成为执行此操作的工具。只是我唯一见过单文件组件的地方一直在 Vue 中，所以这是我的参考点。

【解决方案4】：

有很多插件。

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

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

出于这个原因，我建议如下：

对于小型应用：Vue Meta

npm install vue-meta --save

对于具有动态渲染的大中型应用：

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

有关如何使用 nuxt.js 和 SSR 构建 Web 应用程序的更多信息，请参阅 YouTube 上的视频搜索：

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

【讨论】：