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

Posted 2023-02-23

技术标签:

【中文标题】Vue 2 单文件组件不适用于仅运行时构建【英文标题】：Vue 2 Single File Component doesn't work with runtime only build 【发布时间】：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”与第一个类似。

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

非常感谢！

【问题讨论】：

【参考方案1】：

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