代码之家 › 专栏 › 技术社区 › justicecurcian

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

webpack vue.js

justicecurcian · 技术社区 · 6 年前

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

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

我想把它编译成

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

我该怎么做?

2 回复 | 直到 6 年前

Styx 6 年前

你可以用 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>' }

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

推荐文章

Guillaume Harari · 根据开发或产品环境加载css

6 年前

Max Silva · 无法使用vuejs2和webpack嵌入自定义字体

6 年前

Fered · Npm、Dev dependecy或dependecy,当使用webpack等将所有内容打包到一个脚本中时?

6 年前

Carlo · 如何使用Webpack 4仅在某些模块中导入jQuery?

6 年前

zh-mskl9 · Pug+Web包开发服务器

6 年前

Mizlul · 无法解析“css加载程序!”!自动刷新器加载程序'

6 年前

Aleksandr Gvozdev · 模拟'fs。readdirSync`节点。无递归的js

6 年前

jonnyg · 如何在docker文件中获取我可用的docker环境变量?(使用React/JS/webpack)

6 年前

Boris K · 将Extract Text Webpack插件与Vue CLI 3配合使用

6 年前

IsraGab · 使用webpack从angularjs模块加载特定指令

6 年前