Vue SFC import Файл 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']
    }
}

Что не так с моей конфигурацией? Это проблема моего редактора или дело в конфигурации веб-пакета? Как мне сделать так, чтобы все работало правильно? Спасибо

Редактировать : После ответа Джеффа (спасибо Джеффу) я изменил свойства extensions и alias моей конфигурации веб-пакета:

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

, но этоне изменил результат.

Вот ссылка на исходный код .

Answer 1

Ваш импорт Typescript обычно не должен заканчиваться расширениями. Вместо этого Webpack должен быть настроен на добавление расширений по мере необходимости.

Как и в случае Microsoft Typescript Vue SFC на GitHub , ваш список "resol.extensions" должен включать .ts:

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

Как и в документации resolve.extensions:

Попытаться разрешить эти расширения по порядку.

Если несколько файлов совместно используютТо же имя, но с разными расширениями, веб-пакет разрешит тот, у которого расширение указано первым в массиве, и пропустит остальные.