無法掛載組件：Vue中沒有使用Typescript＆Webpack定義的模板或渲染功能，

Question

單擊“計數器”或“獲取數據”時出現以下錯誤。

[Vue warn]: Failed to mount component: template or render function not defined.                      vendor.js?v=MxNIG8b0Wz6QtAfWhyA0-4CCwZshMscBGmtIBXxKshw:13856 

found in

---> <Anonymous>
       <T> at ClientApp\components\app\app.vue.html
         <Root>

我的boot.ts如下：

import './css/site.css';
import 'bootstrap';
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const Counter = () => import('./components/counter/counter').then(m => m.default);
const FetchData = () => import('./components/fetchdata/fetchdata');

const routes = [
    { path: '/', component:  require('./components/home/home.vue.html').default },
    { path: '/counter', component: Counter },
    { path: '/fetchdata', component: FetchData }
];

new Vue({
    el: '#app-root',
    router: new VueRouter({ mode: 'history', routes: routes }),
    render: h => h(require('./components/app/app.vue.html').default)
});

我的Counter.vue.html如下

<template>
    <div>
        <h1>Counter</h1>

        <p>This is a simple example of a Vue.js component.</p>

        <p>Current count: <strong>{{ currentcount }}</strong></p>

        <button @click="incrementCounter">Increment</button>
    </div>
</template>

<script src="./counter.ts"></script>

我的counter.ts如下：

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

@Component
export default class CounterComponent extends Vue {
    currentcount: number = 0;

    incrementCounter() {
        this.currentcount++;
    }
}

我的fetchdata.vue.html如下：

<template>
    <div>
        <h1>Weather forecast</h1>

        <p>This component demonstrates fetching data from the server.</p>

        <table v-if="forecasts.length" class="table">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Temp. (C)</th>
                    <th>Temp. (F)</th>
                    <th>Summary</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in forecasts">
                    <td>{{ item.dateFormatted }}</td>
                    <td>{{ item.temperatureC }}</td>
                    <td>{{ item.temperatureF }}</td>
                    <td>{{ item.summary }}</td>
                </tr>
            </tbody>
        </table>

        <p v-else><em>Loading...</em></p>
    </div>
</template>

<script src="./fetchdata.ts"></script>

我的fetchdata.ts如下：

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

interface WeatherForecast {
    dateFormatted: string;
    temperatureC: number;
    temperatureF: number;
    summary: string;
}

@Component
export default class FetchDataComponent extends Vue {
    forecasts: WeatherForecast[] = [];

    mounted() {
        fetch('api/SampleData/WeatherForecasts')
            .then(response => response.json() as Promise<WeatherForecast[]>)
            .then(data => {
                this.forecasts = data;
            });
    }
}

我的NPM包裝如下：

-vue-loader@14.2.2

-vue@2.5.16

-vue-router@3.0.1

-webpack@4.3.0（npm列表webpack顯示-（空） 。不知道為什么。但是我猜這不是問題。）

-typescript@2.8.1

Answer 1

對於fetchdata，您還需要執行針對“計數器”的操作。

const FetchData = () => import('./components/fetchdata/fetchdata').then(m => m.default);

然后，對於兩個組件。 U已將“ .ts”文件稱為“ .vue.html”文件（模板）所在的位置。

最短的解決方案是在引用其“ .ts”文件的地方引用“ .vue.html”。 像這樣。

const FetchData = () => import('./components/fetchdata/fetchdata.vue.html').then(m => m.default);

const Counter= () => import('./components/counter/counter.vue.html').then(m => m.default);