Vuejs 如何将单个文件组件编译为 JS 对象

Question

我有一个简单的 Vue js 单文件组件：

<template>
  <div>
    Hello!
  </div>
</template>
<script>
  export default {
    name: 'app'
  }
</script>

我想编译它

{
  template: '<div>Hello!</div>'
}

当然，它应该适用于更复杂的示例，包含组件等。

我该怎么做？

Answer 1

您可以使用vue-template-compiler包：

安装它：

npm i vue-template-compiler

使用它（test.vue是您示例中的组件）：

const fs = require('fs');
const compiler = require('vue-template-compiler');
const content = fs.readFileSync('./test.vue', 'utf-8');
const res = compiler.parseComponent(content);
const template = res.template.content.trim();
const result = { template };
console.log(result);

结果：

{ template: '<div>n  Hello!n</div>' }

不要忘记在代码中添加错误检查。