Vue 2 单文件组件不适用于仅运行时构建答案

【问题标题】：Vue 2 Single File Component doesn't work with runtime only buildVue 2 单文件组件不适用于仅运行时构建
【发布时间】：2017-11-24 22:19:02
【问题描述】：

我尝试在仅运行时构建中使用单个文件组件。当我使用完整的 vue 构建时，一切都按预期工作。我认为单个文件组件是预编译的。为什么我只使用运行时构建时组件不呈现。

这是我的设置：

webpack.config.js：

const webpack = require('webpack');
const webpackConfig = {
entry: "./src/main.ts",
output: { filename: "dist/bundle.js" },
resolve: {
    alias: {
        vue: 'vue/dist/vue.runtime.esm.js'
            //vue: 'vue/dist/vue.esm.js',
    }
},
module: {
    rules: [{
            test: /\.ts$/,
            exclude: /node_modules|vue\/src/,
            loader: 'ts-loader',
            options: {
                appendTsSuffixTo: [/\.vue$/]
            }
        },
        {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                esModule: true
            }
        }
    ]
}
}

module.exports = webpackConfig;

main.ts

import Vue from "vue";
import MyFirstComponent from "./MyFirstComponent.vue";
import MySecondComponent from "./MySecondComponent.vue"

Vue.component("my-first-component", MyFirstComponent);
Vue.component("my-second-component", MySecondComponent);

new Vue({
    el: "#app"
});

MyFirstComponent.vue

<template>
<div>
    This is the first component!
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

@Component
export default class MyFirstComponent extends Vue {
    public mounted() {
        console.log("mounted!");
    }
}
</script>

“MySecondComponent”与第一个类似。

谁能解释为什么这不适用于仅运行时构建？

非常感谢！

【问题讨论】：

标签： typescript webpack vuejs2 vue-component

【解决方案1】：

在官方文档中： https://vuejs.org/v2/guide/installation.html#Terms

编译器：负责将模板字符串编译成 JavaScript 渲染函数的代码。

运行时：负责创建 Vue 实例、渲染和修补虚拟 DOM 等的代码。基本上所有内容都减去了编译器。

使用仅运行时构建时，您排除了将模板编译为 JS 渲染函数所必需的编译器。换句话说，组件的视图（<template></template> 中的 HTML）永远不会被编译，也永远不会出现在 DOM 中，只有运行时构建。

【讨论】：