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

Posted 2023-02-22

【中文标题】webpack 导入 App.vue 或其他组件 vue 失败

【英文标题】：webpack failed to import App.vue or other component vue

【发布时间】：2021-08-29 12:01:18

【问题描述】：

我目前正在创建一个基于 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'
        )
    ]

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

【问题讨论】：

它应该像我提到的那样工作here 只需重新启动 npm run serve 和 vscode 编辑器

是的，我搜索了一些结果是这样的，但几次重试后还是一样。错误仍然存​​在。 @BoussadjraBrahim

尝试用这个 test : /\.ts$/, use: [ 'babel-loader', loader: 'ts-loader', options: appendTsSuffixTo: [/\.vue$/], , , ], ,替换第一条规则

@BoussadjraBrahim 我尝试添加您评论的规则，但仍然是同样的错误。

这能回答你的问题吗？ VueJS/Typescript - Cannot find module './components/Navigation' or its corresponding type declarations

【参考方案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';

【讨论】：

链接指的是一个问题，而不是一个答案。另外，不要复制/粘贴答案，只需将问题标记为重复并让询问是否对他有帮助

下次我会这样做。在尝试帮助人们方面，我是新手。顺便说一句，我如何将其标记为可能的重复项？

在问题的底部，就在问题的评论之上，您有一个“标记”问题（在分享的右侧）。单击它，您将能够找到重复的选择。

我没有那个。我想还没有足够的代表......

哦，是的，你可以在 4 个代表中标记 (more informations)，我为你标记它