我收到以下错误。还有许多其他“视觉上”类似的问题。但我无法弄清楚这些。我正在使用网络包。该模板是从微软的 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”。
虽然以下链接显示了这些版本,但如果我没记错的话,不需要这些默认相关的更改。
最佳答案
instead of below:
import('./components/counter/counter')
I had to write below:
import('./components/counter/counter').then(m => m.default)
Now QUESTION is why it is an issue?
I have
- "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
}
},
关于typescript - 组件挂载失败 : template or render function not defined: Vue Dynamic import, 延迟加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49517519/