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

Question

我尝试在仅运行时构建中使用单个文件组件。当我使用完整的 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;

主目录

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"与第一个类似。

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

非常感谢！

Answer 1

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

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

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

使用仅运行时生成时，将排除将模板编译为 JS 呈现函数所必需的编译器。换句话说，组件的视图(<template></template>内的 HTML(永远不会被编译，并且永远不会出现在 DOM 中，使用仅运行时构建。