TS2307：找不到模块“./App.vue”或其相应的类型声明

Question

我想使用 typescript + Vue 3 开发 google chrome 扩展。在谷歌浏览器扩展弹出索引中，打字稿代码index.ts如下所示：

\n

import { createApp } from 'vue'\nimport App from './App.vue'\n\ndocument.addEventListener('DOMContentLoaded', () => {\n  createApp(App)\n    .mount('#app')\n})\n

\n

看起来App.vue像：

\n

<template lang="pug">\n.container\n  h1 {{ title }}\n  hr\n  Options\n  hr\n  Counter\n  hr\n  Memos\n</template>\n\n<script lang="ts">\nimport { defineComponent } from 'vue'\nimport Options from './components/Options.vue'\nexport default defineComponent({\n  setup() {\n    const title = process.env.APP_NAME\n    return {\n      title\n    }\n  },\n  components: {\n    Options,\n  }\n})\n</script>\n\n<style lang="scss" scoped>\ndiv.container {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  h1 {\n    margin: 0px;\n    padding: 5px 20px;\n    font-size: 1.5em;\n    font-weight: lighter;\n    white-space: nowrap;\n  }\n  hr {\n    size: 1px;\n    width: 100%;\n    color: gray;\n    margin: 0px;\n  }\n}\n</style>\n

\n

当我运行此代码时，显示如下错误：

\n

\xe2\x9e\x9c  reddwaf-translate-plugin git:(main) \xe2\x9c\x97 npm run dev\n\n> reddwaf-translate-plugin@1.0.0 dev\n> rm -rf src/bundle && webpack --mode development --config src/resource/config/webpack.dev.config.js\n\nassets by path popup/ 1.47 KiB\n  asset popup/popup.js 1.27 KiB [emitted] (name: popup/popup) 1 related asset\n  asset popup/popup.html 201 bytes [emitted]\nasset resource/image/logo.png 7.14 KiB [emitted] [from: src/resource/image/logo.png] [copied]\nasset manifest.json 1.22 KiB [emitted] [from: src/manifest.json] [copied]\n./src/popup/index.ts 39 bytes [built] [code generated] [1 error]\n\nERROR in ./src/popup/index.ts\nModule build failed (from ./node_modules/ts-loader/index.js):\nError: TypeScript emitted no output for /frontend/reddwaf-translate-plugin/src/popup/index.ts.\n    at makeSourceMapAndFinish (/frontend/reddwaf-translate-plugin/node_modules/ts-loader/dist/index.js:52:18)\n    at successLoader (/frontend/reddwaf-translate-plugin/node_modules/ts-loader/dist/index.js:39:5)\n    at Object.loader (/frontend/reddwaf-translate-plugin/node_modules/ts-loader/dist/index.js:22:5)\n\nERROR in /frontend/reddwaf-translate-plugin/src/popup/index.ts\n./src/popup/index.ts 2:16-27\n[tsl] ERROR in /frontend/reddwaf-translate-plugin/src/popup/index.ts(2,17)\n      TS2307: Cannot find module './App.vue' or its corresponding type declarations.\nts-loader-default_0c5a263502dc9404\n\nwebpack 5.67.0 compiled with 2 errors in 955 ms\n

\n

这是我的package.json：

\n

{\n  "name": "reddwaf-translate-plugin",\n  "version": "1.0.0",\n  "description": "",\n  "main": "index.js",\n  "scripts": {\n    "dev": "rm -rf src/bundle && webpack --mode development --config src/resource/config/webpack.dev.config.js",\n    "build": "gulp --cwd . --gulpfile build/gulp-build.js",\n    "test": "echo \\"Error: no test specified\\" && exit 1"\n  },\n  "repository": {\n    "type": "git",\n    "url": "git+https://github.com/jiangxiaoqiang/reddwaf-translate-plugin.git"\n  },\n  "author": "",\n  "license": "ISC",\n  "bugs": {\n    "url": "https://github.com/jiangxiaoqiang/reddwaf-translate-plugin/issues"\n  },\n  "homepage": "https://github.com/jiangxiaoqiang/reddwaf-translate-plugin#readme",\n  "devDependencies": {\n    "@babel/core": "^7.16.12",\n    "@babel/preset-env": "^7.16.11",\n    "babel-loader": "^8.2.3",\n    "copy-webpack-plugin": "^10.2.1",\n    "html-webpack-plugin": "^5.5.0",\n    "mini-css-extract-plugin": "^2.5.3",\n    "ts-loader": "^9.2.6",\n    "typescript": "^4.5.5",\n    "webpack": "^5.67.0",\n    "webpack-cli": "^4.9.2"\n  },\n  "dependencies": {\n    "@types/chrome": "^0.0.177",\n    "@types/webextension-polyfill": "^0.8.2",\n    "vue": "^3.2.29",\n    "vue-loader": "^15.9.8",\n    "vuex": "^4.0.2"\n  }\n}\n

\n

这是 webpack 配置：

\n

const path = require('path');\nconst webpack = require( 'webpack' );\nconst MiniCssExtractPlugin = require( 'mini-css-extract-plugin');\nconst HtmlWebpackPlugin = require( 'html-webpack-plugin');\nconst CopyPlugin = require("copy-webpack-plugin");\n\nmodule.exports = {\n  entry : {\n    'popup/popup' : './src/popup/' \n  } ,\n  resolve: {\n    extensions: ['.tsx', '.ts', '.js'],\n    alias: {\n        vue: 'vue/dist/vue.esm-bundler.js'\n    },\n  },\n  output : {\n    path : path.resolve(__dirname, '../../bundle') ,\n    filename : '[name].js'\n  },\n  module : {\n    rules : [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader'\n      },\n      {\n        test: /\\.ts$/,\n        loader: 'ts-loader',\n        options: {\n          appendTsSuffixTo: [/\\.vue$/]\n        },\n        exclude: /node_modules/\n      },\n      \n      {\n        test : /\\.js$/ ,\n        exclude : [ /node_modules(?!(\\/|\\\\?\\\\)(translation\\.js|selection-widget|connect\\.io|chrome-env)\\1)/ ] ,\n        loader : 'babel-loader'\n      } ,\n      {\n        test: /\\.css$/i,\n        use: [MiniCssExtractPlugin.loader, "css-loader"],\n      },\n      {\n        test : /\\.(scss)$/ ,\n        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']\n      }\n    ]\n  },\n  plugins : [\n    new CopyPlugin({\n      patterns: [\n        { from: "src/manifest.json", to: "manifest.json" },\n        { from: "src/resource/image", to: "resource/image" },\n      ],\n    }),\n    new MiniCssExtractPlugin({\n      filename: "[name].css",\n      chunkFilename: "[id].css",\n    }),\n    new HtmlWebpackPlugin({\n      filename: 'popup/popup.html',\n      template: 'src/popup/index.html'\n    }),\n    new webpack.DefinePlugin({\n      __VUE_OPTIONS_API__: false,\n      __VUE_PROD_DEVTOOLS__: false,\n    }),\n  ]\n};\n

\n

Answer 1

尝试将以下内容放入src/shims-vue.d.ts文件中：

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