Question

我尝试将单个文件组件与仅运行时构建一起使用。当我使用完整的vue构建时，everythings按预期工作。我认为单个文件组件是预编译的。当我使用仅运行时构建时，为什么不渲染组件。

这是我的设置：

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

任何人都可以解释为什么这不适用于仅运行时的构建吗？

非常感谢！

Answer 1

关于官方文件： https://vuejs.org/v2/guide/installation.html#Terms

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

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

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

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

1 个答案: