打字稿 Vue 基于类的组件抛出错误 无法在 Laravel 混合中设置未定义的属性'render'

Question

我正在使用Laravel Mix来编译我的Vue组件，为此，我使用了TypeScript和基于类的组件。每个类都是从组件中导出的，并且主应用程序脚本中的上下文需要每个组件，但在渲染 Vue 期间会抛出错误。

Uncaught TypeError: Cannot set property 'render' of undefined
at normalizeComponent (componentNormalizer.js:24)

我搜索了所有互联网，但人们只谈论无效的导出类。我确定组件中的有效导出类。我不知道我做错了什么。

当我回到普通JavaScript中基于对象的组件时，一切都很完美，所以也许TypeScript配置是错误的或其他什么。我完全放弃了:(

应用程序

import Vue from 'vue';
import _ from "lodash"
export default class App {
protected registerComponents(): void {
const components = require.context('./', true, /.vue$/i);
components.keys().forEach((componentPath) => {
// @ts-ignore
const componentName = componentPath
.split('/').pop() // full component name
.split('.').slice(0, 1).shift(); // component name without extension
Vue.component(
_.kebabCase(componentName),
components(componentPath)
);
})
}
protected boot(): void {
this.registerComponents();
}
public init(): Vue {
this.boot();
return new Vue({
el: '#main',
});
}
}

EventSignUpForm.vue

<template>
<div>
<p>Long-form v-model example</p>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import {Component} from 'vue-property-decorator';
@Component({
name: 'EventSignUpForm',
})
export class EventSignUpForm extends Vue {
protected count = 0
public increment() {
this.count++
}
public decrement() {
this.count--
}
}
export default EventSignUpForm;
</script>

tsconfig.json

{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"node",
"webpack-env"
],
"paths": {
"@/*": ["./resources/js/*"]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"resources/js/**/*.ts",
"resources/js/**/*.tsx",
"resources/js/**/*.vue"
],
"exclude": [
"node_modules"
]
}

webpack.mix.js

class WebpackMix {
constructor() {
this.mix = require('laravel-mix');
}
configureWebpack(){
this.mix.webpackConfig({
module: {
rules: [
{
test: /.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/,
}
]
},
resolve: {
extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx"],
alias: {
'@': path.resolve(__dirname, 'resources', 'js'),
},
}
});
}
// others things  
}

Answer 1

EventSignUpForm.vue： 使组件exportexport default：

export class EventSignUpForm extends Vue 

更改为

export default class EventSignUpForm extends Vue

并从底部取出

export default EventSignUpForm;

Answer 2

我的同事帮我解决了这个相当困难的案件。

我们所做的是在webpack.mix 中添加 webpack.mix.js到ts-loader选项对象。我们需要将 TS 后缀附加到 Vue 组件中。现在是：

rules: [
{
test: /.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/.vue$/]
}
}
]

我们接下来要做的是将tsconfig.jscompilerOptions.module更改为commonjs而不是es2015，如下所示：

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
// the rest remain unchanged
}
}

最后一件事，所有导入/需要 Vue 组件都必须是默认导入，我只在require.context中使用了导入，但必须将其更改为：

protected registerComponents(): void {
const components = require.context('./', true, /.vue$/i);
components.keys().forEach((componentPath) => {
// @ts-ignore
const componentName = componentPath
.split('/').pop() // full component name
.split('.').slice(0, 1).shift(); // component name without extension
Vue.component(
_.kebabCase(componentName),
components(componentPath).default
);
})
}

这解决了我的问题，感谢阿德里安的时间，并给出了工作解决方案:)