是否可以将 Vue.js 模板编译为静态 HTML 和 CSS 文件？
Posted
技术标签:
【中文标题】是否可以将 Vue.js 模板编译为静态 HTML 和 CSS 文件？【英文标题】：Is it possible to compile Vue.js templates to static HTML and CSS files? 【发布时间】：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。
我正在尝试做的事情可能吗？
【问题讨论】：
【参考方案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
对于具有动态渲染的大中型应用：
带有 s-s-r（服务器端渲染）的 nuxt.js：
有关如何使用 nuxt.js 和 s-s-r 构建 Web 应用程序的更多信息，请参阅 YouTube 上的视频搜索：
https://www.youtube.com/results?search_query=nuxt+js+and+s-s-r
【讨论】：
以上是关于是否可以将 Vue.js 模板编译为静态 HTML 和 CSS 文件？的主要内容，如果未能解决你的问题，请参考以下文章
Vue js Vue-cli 执行“npm run build”，将图像不透明度的 css 编译为 1%