Vue模板渲染没有所有额外的

Question

我有一组非常非常简单的Vue组件，它们都能正常工作。 这些是在现有C＃应用程序之上的简单添加。

目前，这些文件是.html文件（在<script>标记内部带入应用程序）和.js文件（通过引用加载）。

所有这些都非常轻巧，我很喜欢。

现在，我想将每个组件的HTML编译成Vue渲染函数，并将.js编译成一个缩小的.js文件。

从.js到.min.js是相当标准的，但是我无法弄清楚如何将HTML编译到Vue渲染函数中。 我发现的所有内容都涉及大量开销和运行Web服务器 ，这似乎对于html->script转换来说是过大的杀伤力，而且我不需要启动完整的Web应用程序。 与将长格式的html模板转储到页面上相比，我只需要将现有的简单模板转换为对生产更友好的东西。

我并不完全反对将.html + .js转换为.vue文件，但是这样做似乎并不能解决我的问题。

Answer 1

我不知道如何将HTML编译到Vue渲染函数中

要从Vue模板字符串生成渲染函数（例如，从HTML文件读取），可以使用vue-template-compiler如下所示：

const compiler = require('vue-template-compiler')
const output = compiler.compile('<div>{{msg}}</div>')
console.log(output) // => { render: "with(this){return _c('div',[_v(_s(msg))])}" }

我发现的所有内容都涉及大量开销并运行Web服务器，这似乎对于html->script转换来说是过大的杀伤力

您提到的“ Web服务器”由Webpack CLI提供，旨在促进开发。 您无需使用开发服务器。 文章的确描述了手动设置项目以构建Vue单文件组件的几个步骤，但是一种更简单的方法是使用Vue CLI自动搭建此类项目。