Question

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

<template>
  <div>
    Hello!
  </div>
</template>

<script>
  export default {
    name: 'app'
  }
</script>

我想将其编译为

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

当然，它应该与更复杂的示例配合使用，包括附带的组件等。

我该怎么做？

Answer 1

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

安装：

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>' }

别忘了在代码中添加错误检查。

Answer 2

在这种情况下，您可能希望将.vue文件转换为.js，然后将组件写入并导出为

export default Vue.component({ template: '<div>Hello!</div>' })

，然后将其导入Vue实例中所需的任何位置。

vuejs如何将单个文件组件编译为js对象

2 个答案: