Vue SFC导入TypeScript文件抛出“导入路径不能以'.ts'扩展名结尾。”在VS Code中

Question

我正在尝试更改.vue组件以使用TypeScript而不是JavaScript。 因此，我的单个文件组件如下所示：

<template>
  ...something...
</template>

<script lang="ts">
import {  } from "./main.ts";

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

我的编辑器告诉我，我无法导入带有扩展名的文件，因此"./main.ts"似乎是一个错误，即使我可以在webpack的情况下成功构建它。

如果我删除了.ts扩展名，我的编辑器可以正常工作（它也检测到模块导出），但是webpack无法构建dist文件，并抛出以下错误：Module not found: Error: Can't resolve './main' in ...。

我的webpack配置文件如下：

const path = require('path');
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
    entry: './src/main.ts',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    plugins: [ new VueLoaderPlugin() ],
    module: {
            rules: [
            {
                test: /\.ts$/,
                use: "ts-loader",
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ],
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.js', '.vue']
    }
}

我的配置有什么问题？这是我的编辑器出现问题还是与Webpack配置有关？如何设法使其正常工作？ 谢谢

修改： 在Jeff回答之后（感谢Jeff），我更改了Webpack配置的extensions和alias属性：

extensions: [ ".ts", ".js", ".vue" ],
alias: {
    "vue$": "vue/dist/vue.esm.js"
}

但这不会改变结果。

Here is a link to the source code。

Answer 1

您的Typescript导入通常不应以扩展名结尾。相反，应该将Webpack配置为根据需要附加扩展。

与Microsoft Typescript Vue SFC example on GitHub一样，您的“ resolve.extensions”列表应包含.ts：

  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },

与resolve.extensions文档中一样：

  

尝试按顺序解析这些扩展名。

     

    

如果多个文件共享相同的名称，但具有不同的扩展名，则webpack会解析该扩展名列在数组中首位的文件，并跳过其余文件。