webpack 导入 App.vue 或其他组件 vue 失败

Question

我目前正在创建一个基于 webpack 并使用 typescript 添加到 vue3 中。 但现在我面临的问题是 TS2307: Cannot find module './App.vue' or its corresponding type declarations.

shsims-vue.d.ts目前设置在src文件夹下，默认生成。

/* eslint-disable */
import VueRouter, { Route } from 'vue-router'

declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, any>
    export default component

}

这是我的 tsconfig.json

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

这是我的 webpack 配置文件

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { VueLoaderPlugin } = require('vue-loader')
const utils = require('./utils')
const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/main.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.[hash].bundle.js'
    },

    resolve: {
        extensions: ['.ts', '.js', '.vue', '.json'],
        alias: {
            'vue': '@vue/runtime-dom'
        }
    },
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        port: 9000,
        hot: true
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                },
                exclude: /node_modules/,
            },
            {
                test: /\.s[ac]ss$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
            },
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.png/,
                type: 'asset/resource'
            },
            {
                test: /\.vue$/,
                use: {
                    loader: "vue-loader",
                }
            },
        ]
    },
    // to see the source code in browser 
    devtool: 'source-map',
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            filename: 'main.[hash].css'
        })
    ]
}

在其他组件也面临此错误，不知道这是如何发生的以及如何解决。请为此提供一些启示。谢谢。

Answer 1

查看this 答案。我认为您需要在您的src/ 中创建一个shims-vue.d.ts 文件。

来自链接的答案：

在src文件夹中添加文件shims-vue.d.ts，内容如下：

Vue 2：

   declare module "*.vue" {
    import Vue from 'vue'
    export default Vue
   }

Vue 3：

   declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, any>
    export default component
   }

并导入扩展名为.vue的组件：

import Navigation from './components/Navigation.vue';

而不是：

import Navigation from './components/Navigation';