如何编译 Vuejs 单文件组件？答案

【问题标题】：How to compile Vuejs single file component?如何编译 Vuejs 单文件组件？
【发布时间】：2016-10-17 16:07:43
【问题描述】：

我正在使用 Vuejs 2（webpack-simple 模板），我想知道如何在渲染之前编译模板。在我的代码下方：

App.vue

<template>
    <div id="app">
        <h1>{{ msg }}</h1>
    </div>
</template>
<script>
    export default {
        name: 'app'
    }
</script>

main.js

import Vue from 'vue'
import App from './App.vue'

const res = Vue.compile(App)
const vm = new Vue({
    el: '#app',
    data: {
        msg: 'hello'
    },
    render: res.render,
    staticRenderFns: res.staticRenderFns
})

这是我在启动服务器时遇到的错误：__WEBPACK_IMPORTED_MODULE_0_vue___default.a.compile is not a function

我也试过这个插件vue-template-compiler 没有运气。你能帮我让它工作吗？提前致谢。

【问题讨论】：

使用 vue-template-compiler 时发生了什么？
@MahmudAdam 我收到了这个错误：...MyProject/node_modules/vue-template-compiler/package.json Unexpected token. You may need an appropriate loader to handle this file type. ...
试试这个：stackoverflow.com/questions/33469929/…
@MahmudAdam 不起作用

标签： javascript vue-component vue.js vuejs2

【解决方案1】：

您将需要在 webpack 的配置中进行此设置：

resolve: {
  alias: {
    'vue$': 'vue/dist/vue'
  }
}

尽管有这个问题：http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build

【讨论】：

确实可以，但是编译函数只支持String作为参数。感谢您的回复@imcvampire。