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

【问题标题】：Vue SFC import TypeScript file throws "An import path cannot end with a '.ts' extension." in VS CodeVue SFC 导入 TypeScript 文件抛出“导入路径不能以 '.ts' 扩展名结尾。”在 VS 代码中
【发布时间】：2020-01-29 05:34:02
【问题描述】：

我正在尝试更改我的 .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>

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

如果我删除 .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.

【问题讨论】：

标签： typescript vue.js webpack visual-studio-code

【解决方案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 将解析数组中第一个具有扩展名的文件并跳过其余文件。

【讨论】：