Javascript 如何在没有babel的情况下使tsx在vue-cli3中工作

我正在设置一个由vue cli 3.8.0创建的新项目

我只选择了typescript（没有babel编译器）

现在，当我编写一个

foo.tsx

文件时，如下所示：

export default {
    render() {
        return (<div>777</div>);
    },
};

读完后，我对发生的事情感到困惑，因为我认为这是正确的

所以，我需要你的帮助

PS

vue:2.6.10

@vue/cli插件类型脚本：3.8.1

@vue/cli服务：3.8.0

tsconfig.json：

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

{
    resolve: {
        // ...
        extensions: [
            ".mjs",
            ".js",
            ".jsx",
            ".vue",
            ".json",
            ".wasm",
            ".ts",
            ".tsx",
        ],
    },
    module: {
        noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
        rules: [
            {
                test: /\.vue$/,
                use: [
                    {
                        loader: "cache-loader",
                        options: {
                            cacheDirectory:
                                "E:\\workspace\\project-name\\node_modules\\.cache\\vue-loader",
                            cacheIdentifier: "abfeee2e",
                        },
                    },
                    {
                        loader: "vue-loader",
                        options: {
                            compilerOptions: {
                                preserveWhitespace: false,
                            },
                            cacheDirectory:
                                "E:\\workspace\\project-name\\node_modules\\.cache\\vue-loader",
                            cacheIdentifier: "abfeee2e",
                        },
                    },
                ],
            },
            // ...
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: "cache-loader",
                        options: {
                            cacheDirectory:
                                "E:\\workspace\\project-name\\node_modules\\.cache\\ts-loader",
                            cacheIdentifier: "f2bb628a",
                        },
                    },
                    {
                        loader: "ts-loader",
                        options: {
                            transpileOnly: true,
                            appendTsSuffixTo: ["\\.vue$"],
                            happyPackMode: false,
                        },
                    },
                ],
            },
            {
                test: /\.tsx$/,
                use: [
                    {
                        loader: "cache-loader",
                        options: {
                            cacheDirectory:
                                "E:\\workspace\\project-name\\node_modules\\.cache\\ts-loader",
                            cacheIdentifier: "f2bb628a",
                        },
                    },
                    {
                        loader: "ts-loader",
                        options: {
                            transpileOnly: true,
                            happyPackMode: false,
                            appendTsxSuffixTo: ["\\.vue$"],
                        },
                    },
                ],
            },
        ],
    },
    plugins: [
        new VueLoaderPlugin(),
        // ...
        /* config.plugin('fork-ts-checker') */
        new ForkTsCheckerWebpackPlugin({
            vue: true,
            tslint: true,
            formatter: "codeframe",
            checkSyntacticErrors: false,
        }),
    ],
}

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