typescript - 挂载组件失败：未定义模板或渲染函数：Vue 动态导入，懒加载

我得到了以下错误。还有许多其他‘视觉上’类似的问题。但我无法弄清楚那些。我正在使用 webpack。这个模板是从微软的 javascriptservices 模板生成的。我对它们进行了修改，以使它们能够与动态模板导入一起使用。

[Vue warn]: Failed to mount component: template or render function not defined.

vendor.js?v=MxNIG8b0Wz6QtAfWhyA0-4CCwZshMscBGmtIBXxKshw:13856     

found in 

---> <MenuComponent>
       <T> at ClientApp\components\app\app.vue.html
         <Root>
warn @ vendor.js?v=MxNIG8b0Wz6QtAfWhyA0-4CCwZshMscBGmtIBXxKshw:13856

我的 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');

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

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

我的 app.vue.html 如下：

<template>
    <div id='app-root' class="container-fluid">
        <div class="row">
            <div class="col-sm-3">
                <menu-component />
            </div>
            <div class="col-sm-9">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

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

我的 app.ts 如下：

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

@Component({
    components: {
        MenuComponent: require('../navmenu/navmenu.vue.html')
    }
})
export default class AppComponent extends Vue {
}

[更新] 大家。我现在通过以下更改解决了这个问题。

在 require 之后有一个地方缺少 .default，那是在 boot.ts 中

也而不是下面：

import('./components/counter/counter')

我不得不写如下内容：

import('./components/counter/counter').then(m => m.default)

现在的问题是为什么这是一个问题？ 我有 "vue": "^2.5.16", "vue-loader": "^14.2.2", "vue-router": "^3.0.1"。

而根据以下链接所说，对于这些版本，如果我没弄错的话，这些默认相关更改是不需要的。

https://github.com/vuejs/vue-loader/releases/tag/v13.0.0

答案＃1

而不是下面：

import('./components/counter/counter')

我不得不写如下内容：

import('./components/counter/counter').then(m => m.default)

现在的问题是为什么这是一个问题？

我有

• "vue": "^2.5.16",
• "vue-loader"："^14.2.2",
• "vue-router": "^3.0.1".

这些 .default 是由于在新版本中 esModule 选项被设置为 true 引起的。

你可以使用 .default，或者通过在 vue-loader 选项中显式使用 esModule: false 来关闭新行为。

示例：

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          },
          esModule: false // example of setting to false
        }
      },