無法安裝組件：未定義模板或渲染功能：Vue動態導入，延遲加載

Question

我收到以下錯誤。 那里還有許多其他“視覺上”類似的問題。 但是我不知道這些。 我正在使用webpack。 該模板是從Microsoft的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 {
}

[更新]伙計們。 現在，我通過以下更改解決了此問題。

一個地方失蹤.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

Answer 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
        }
      },