最近我爱上了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加载这些组件的页面，而是将HTML和CSS文件分开，而不使用任何JavaScript渲染？
理想情况下，我会有一个组件'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足够。
我想做的事有可能吗？
5条答案
按热度按时间ctehm74n1#
这里有很多plugins。
为较小的项目安装Vue meta。如果你只有几个静态页面，我建议你使用Vue meta，然后手工或使用预渲染服务为相同的页面创建几个HTML文件。
预渲染的问题是它只在某些设置下可用，如果你没有理想的设置，可能很难安装，需要你重新构建它来优化SEO和Vue.js中的预渲染
为此，我建议如下：
对于小型应用程序：Vue meta
npm install vue-meta --保存
对于具有动态渲染的中型到大型应用程序：
nuxt.js with SSR（服务器端渲染）：
有关如何使用nuxt.js和SSR构建Web应用程序的更多信息，请参阅YouTube上的此视频搜索：
https://www.youtube.com/results?search_query=nuxt+js+and+ssr
oiopk7p52#
您可以使用
pagesVue配置在多页面模式下构建应用。详情请参见https://cli.vuejs.org/config/#pages。qlfbtfca3#
您正在寻找的是服务器端渲染。我建议你看看Nuxt.js。
VueJS文档：
正确配置生产就绪的服务器呈现的应用程序的所有讨论的方面可能是一项艰巨的任务。幸运的是，有一个很好的社区项目，旨在使这一切变得更容易：Nuxt.js是构建在Vue生态系统之上的更高级别的框架，它为编写通用Vue应用程序提供了极其简化的开发体验。更好的是，您甚至可以将其用作静态站点生成器（将页面创作为单文件Vue组件）！我们强烈建议您尝试一下。
这是超级简单的得到它started。如果使用
vue-cli：它配备了所有你通常需要的（Vuex，路由器，..）。请记住，它强制执行一些文件夹结构，您必须遵循。
Here是包含在启动器中的命令列表。
您可能对
generate命令最感兴趣，因为它构建应用程序并将每个路由生成为HTML文件（用于静态托管）。
还有一件很酷的事情要注意的是，这个项目似乎是（在写这篇文章的时候）under active development，我们可以期待更多伟大的功能！
ikfrs5lh4#
vuejs官方指南：
如果你使用的是Webpack，你可以很容易地用prerender-spa-plugin添加预渲染。它已经用Vue应用程序进行了广泛的测试-事实上，创建者是Vue核心团队的成员。
tyu7yeag5#
我会说你不能这样做，因为
Vue使用虚拟DOM，它不会将模板编译为HTML，而是编译为JavaScriptrender functions，这对于在数据更新时有效地修补DOM是必要的。我确信可以使用一些
node魔法来解析和输出文件，但这对于只有最小效果的东西来说是一项相当大的任务。